H5 移動端Input File 檔案上傳以及後端接收
阿新 • • 發佈:2018-12-09
前端部分
前端部分主要用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