您好,登錄后才能下訂單哦!
我們首先看下HTML代碼實現(xiàn)的form提交部分。其中大家在測試的時候需要把test的URL更換成自己的,也可以直接寫一個本地地址測試。
html代碼:
<form id="uploadForm" action="http://storage.test.com/file/upload" method="post" enctype="multipart/form-data"> <input type="hidden" name="key" id="key" value="VTZ18HM64#D_L3WX" /> <input type="file" name="uploadFiles" value="" id="fileImage" multiple='multiple' /> <div class="upload_submit"> <button type="button" id="fileSubmit" class="upload_btn">保存</button> </div> </form>
js代碼:
var Fileupload = { fileInput: $("#fileImage").get(0), dragDrop: $("#fileDragArea").get(0), upButton: $("#fileSubmit").get(0), url: $("#uploadForm").attr("action"), })(), //文件上傳 funUploadFile: function() { var self = this; for (var i = 0, file; file = this.fileFilter[i]; i++) { (function(file) { var xhr = new XMLHttpRequest(); if (xhr.upload) { // 上傳中 xhr.upload.addEventListener("progress", function(e) { self.onProgress(file, e.loaded, e.total); }, false); // 文件上傳成功或是失敗 xhr.onreadystatechange = function(e) { if (xhr.readyState == 4) { if (xhr.status == 200) { self.onSuccess(JSON.parse(xhr.responseText)); self.funDeleteFile(file); if (!self.fileFilter.length) { //全部完畢 self.onComplete(); } } else { self.onFailure(file, xhr.responseText); } } }; //準備FormData對象 var myForm = document.getElementById('uploadForm'); //將文件放入FormData對象中 formData = new FormData(myForm); // 開始上傳 xhr.open("POST", self.url, true); xhr.send(formData); } })(file); } }, init: function() { var self = this; //上傳按鈕提交 if (this.upButton) { console.log('提示: 當前存儲服務器地址', this.url) this.upButton.addEventListener("click", function(e) { self.funUploadFile(e); }, false); } self.bindEvent(); } }; Fileupload = $.extend(Fileupload); Fileupload.init();
FormData 異步上傳文件
<input type="file" id="file">
一、創(chuàng)建FormData放入待上傳文件
//準備FormData對象 var formData = new FormData(), uploadFile = document.getElementById('file'); //將文件放入FormData對象中 formData.append('file', uploadFile.files[0]);
二、通過xhr發(fā)送FormData數(shù)據(jù)到服務器,實現(xiàn)文件上傳
//創(chuàng)建xhr對象 var xhr = new XMLHttpRequest(); //監(jiān)聽文件上傳進度 xhr.upload.onprogress = function(evt){ //lengthComputabel: 文件長度是否可計算 if(evt.lengthComputable){ //evt.loaded: 已下載的字節(jié)數(shù) //evt.total: 文件總字節(jié)數(shù) var percent = Math.round(evt.loaded*100/evt.total); console.log(percent); } } //監(jiān)聽文件傳輸開始 xhr.onloadstart = function(evt){ xhr.abort() //終止上傳 } //監(jiān)聽ajax成功完成事件 xhr.onload = function(evt){ ... } //監(jiān)聽ajax錯誤事件 xhr.onerror = function(evt){ ... } //監(jiān)聽ajax被中止事件 xhr.onabort = function(evt){ ... } //監(jiān)聽傳輸結束事件: 不管成功或者失敗都會觸發(fā) xhr.onloaded = function(evt){ ... } //*發(fā)起ajax請求數(shù)據(jù) xhr.open('POST', '/url', true); xhr.send(formData);
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。