1. 程式人生 > >H5 移動端Input File 檔案上傳以及後端接收

H5 移動端Input File 檔案上傳以及後端接收

前端部分

前端部分主要用ajax 上傳Base64字串碼

$("#fileInput").live("change", function() {
                    var path = $(this).val();
                    var showfilename = $(this).parent().parent().prev(); //展示檔名稱的view
                    showfilename.show(); //顯示展示名稱
                    showfilename.text(this.files[0].name);
                    var reader = new FileReader();
                    reader.readAsDataURL(this.files[0]);
                    reader.onload = function(e) {
                        console.log(e.target.result)
                        mui.ajax(http + _data.upload2, {
                            data: {
                                file: e.target.result,
                                fileModuleName: "saler",
                            },
                            dataType: 'json', //伺服器返回json格式資料
                            type: 'post', //HTTP請求型別
                            timeout: timeOut,
                            success: function(data) {
                                 //獲取返回的上傳成功的資料
                            },
                            error: function(xhr, type, errorThrown) {
                                //異常處理;
                                
                            }
                        });
                    };
                });

後端部分

後端部分獲取Base64之後解析出來,根據不同的格式進行再構造,並傳給前端,主要的是格式問題,故格式整合如下(圖片型別不變,變得是其他檔案型別)
word doc字尾,type為msword

以此類推
word字尾docx---tyoe為 vnd.openxmlformats-officedocument.wordprocessingml.document

excel字尾xls---vnd-ms-excel
excel字尾xlsx----vnd.openxmlformats-officedocument.spreadsheetml.sheet

pdf字尾 pdf----pdf

txt字尾 ---text/plain
ppt字尾----vnd.openxmlformats-officedocument.presentationml.presentation