1. 程式人生 > 其它 >手機端附件上傳(FileReader / formData )

手機端附件上傳(FileReader / formData )

..

<input id="uploaderInput" class="input" type="file" accept="application/pdf" multiple="">

..

//-------------------------------------------------------
var FU_TIMEOUT = 30*1000;  // //ajax超時

//將base64轉換為檔案
function URL_TO_FILE(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr 
= atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, {type:mime}); } $(function() { var $uploaderInput = $("#uploaderInput"); // 允許上傳的圖片型別 var allowTypes = ['application/pdf'];
var maxSize = 1024 * 1024 * 5; // 10240KB,也就是 10MB $uploaderInput.on("change", function(e) { console.log(e); var files = e.target.files; // 如果沒有選中檔案,直接返回 if (files.length === 0) { return; } for (var i = 0, len = files.length; i < len; ++i) {
var file = files[i]; var fileType = file.type; // 如果型別不在允許的類型範圍內 if (allowTypes.indexOf(file.type) === -1) { $.toast('該型別不允許上傳' + fileType, "forbidden"); continue; }else{ fileType = "pdf"; } if (file.size > maxSize) { $.toast("附件太大,不允許上傳", "forbidden"); continue; } const reader = new FileReader();//檔案讀取器 reader.readAsDataURL(file);//獲取檔案URL,結果存至 // readAsArrayBuffer(file): void 非同步按位元組讀取檔案內容,結果用ArrayBuffer物件表示 // readAsBinaryString(file): void 非同步按位元組讀取檔案內容,結果為檔案的二進位制串 // readAsDataURL(file): void 非同步讀取檔案內容,結果用data: url的字串形式表示 // readAsText(file, encoding): void 非同步按字元讀取檔案內容,結果用字串形式表示 reader.onload = function(event) { //.onload 但fr執行完之後 執行匿名函式 /*event.target.nodeName   //獲取事件觸發元素標籤名(li,p,div,img,button…) event.target.id      //獲取事件觸發元素id event.target.className  //獲取事件觸發元素classname event.target.innerHTML  //獲取事件觸發元素的內容(li)*/ //console.log(event); const data = event.target.result; // data:application/pdf;base64 //console.log(data) //var fileObj = URL_TO_FILE(data,file.name); //console.log(fileObj) var formData = new FormData(); formData.append("file_stream_id",FILE_STREAM_ID);//業務id formData.append("code","pdf");//附件所屬業務型別 formData.append('file', file);//檔案 formData.append('data', data);//base64 $.ajax({ url: 'http://localhost:9050/xxx.do', type: 'POST', cache: false, data: formData, processData: false, contentType: false, dataType:'json', timeout : FU_TIMEOUT, }).done(function(Obj) { console.log(Obj) $.alert(Obj); }).fail(function(res){}); } } }); });