在XMLHttpRequest Level2出臺之前，大多數的異步上傳圖片都是利用iframe去實現的。

至于具體的實現細節，我就不在這邊啰嗦的，Google一下就有文章談這個東西。 這次主要說說，怎么用新的API去實現圖片上傳。 首先，少不了的自然是XMLHttpRequest Level2的一些新特性啦。 其中最為實在的就是FormData對象，直接把表單(form)的Dom對象轉為FormData對象，然后向服務器發送。 還有就是Progress事件的支持，異步上傳終于可以查看進度條啦！ 這里我就不廢話了，因為大多數人應該都看過的 阮一峰 的 《XMLHttpRequest Level 2 使用指南》，直接貼代碼吧。 1 var formData= new FormData(form), 2 ? ? xhr= new XMLHttpRequest(); 3? 4 xhr.open("POST", url); 5 xhr.send(formData); ? ? 接口的部分也很簡單，例如PHP，直接用$_POST、$_FILES就可以拿到相關的數據. 沒錯，就是這么簡單。 而通過監聽Progress時間，就可以判斷當前數據上傳/下載的進度。 1 xhr.upload.onprogress = function (e) { 2 ? ? console.log(e.loaded / e.total * 100); ? ?// 上傳進度 3 } 4? 5 xhr.onprogress = function (e) { 6 ? ? console.log(e.loaded / e.total * 100); ? ?// ?下載進度 7 } 至于XMLHttpRequest Level2的支持情況，在移動端還是比較理想的。 一直以來，無數的前端屌絲都渴望瀏覽器可以提供JavaScript訪問本地文件的API。 其實大老早，IE就能利用ActiveX來操作本地文件了，但因為并非W3C的標準，一直就只有IE在玩。 于25 October 2012，W3C訂立了File API的草案。 另外，和File對象配套使用的，還有FileReader對象。具體有什么用后面再說。 下面是它們倆的支持度，情況比較一般。不過先學著就差不多了，哈~ 先說說File對象吧。 File對象是來自用戶在一個<input>元素上選擇文件后返回的FileList對象,也可以是來自由拖放操作生成的 DataTransfer對象. 如下： 1 // input:file的File對象 2 document.querySelector("input[type=file]").files; ? ?// return FileList 3? 4 // drop事件的File對象 5 elem.ondrop = function (e) { 6 ? ? e.preventDefault(); 7 ? ? return e.dataTransfer.files; ? ? // return FileList 8 }; 都是以一個FileList的對象返回。這個FileList的對象類似于NodeList。有length屬性，但并非數組。 下面是Chrome Console打印出來的FileList對象： 再看看File對象有什么屬性： 那些屬性都代表什么意思我就不再廢話了。但我們可以留意到，File對象是繼承于Blob對象，至于什么是Blob對象，后面的篇幅咱們再提及。 一開始，我們還提到一個FileReader的對象，說是配套著File對象一起用。 使用FileReader對象,web應用程序可以異步的讀取存儲在用戶計算機上的文件(或者原始數據緩沖)內容,可以使用File對象或者Blob對象來指定所要讀取的文件或數據. 具體怎么用，我們看看下面的代碼： 1 // 創建一個FileReader對象 2 var reader = new FileReader(); 3? 4 // 綁定load事件 5 reader.onload = function(e) { 6 ? ? console.log(e.target.result); 7 } 8? 9 // 讀取File對象的數據 10 reader.readAsDataURL(document.querySelector("input[type=file]").files[0]); 當FileReader對象通過readAsDataURL讀取數據成功后，就會觸發load事件。target中的result屬性的值，就是該文件的base64數據 當然，FileReader對象不單單只有readAsDataURL一個方法。 1 /** 2 ?* 中止該讀取操作.在返回時,readyState屬性的值為DONE. 3 ?*/ 4 reader.abort(); 5? 6? 7 /** 8 ?* 開始讀取指定的Blob對象或File對象中的內容.? 9 ?* 當讀取操作完成時,readyState屬性的值會成為DONE,如果設置了onloadend事件處理程序,則調用之. 10 ?* 同時,result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內容. 11 ?*/ 12 reader.readAsDataURL(file); 13? 14? 15 /** 16 ?* 同上, result屬性中將包含一個字符串以表示所讀取的文件內容. 17 ?* encoding是可選項,類型為字符串,表示了返回數據所使用的編碼.如果不指定,默認為UTF-8. 18 ?*/ 19 reader.readAsText(file[, encoding ]); 20? 21? 22 /** 23 ?* 同上, result屬性中將包含一個ArrayBuffer對象以表示所讀取文件的內容. 24 ?*/ 25 reader.readAsArrayBuffer(file);? 26? 27? 28 /** 29 ?* 同上, result屬性中將包含所讀取文件的原始二進制數據. 30 ?*/ 31 reader.readAsBinaryString(file); 既然拿到了文件的base64，那做事情就方便多了。 例如，我們可以直接把base64的字符串post到服務器端。 1 var reader = new FileReader(); 2? 3 reader.onload = function(e) { 4 ? ? var xhr = new XMLHttpRequest(), 5 ? ? ? ? fromData = new FormData(); 6? 7 ? ? fromData.append("base64", e.target.result); 8 ? ? xhr.open("post",url, true); 9 ? ? xhr.send(fromData); 10 } 11? 12 reader.readAsDataURL(document.querySelector("input[type=file]").files[0]); 是不是覺得有什么不對？ 既然都用FormData了，還轉個毛線base64啊！ 轉成base64之后，最大的好處就是可以繪制到Canvas上，然后對圖片進行編輯！ 在客戶端這邊做裁剪啊涂鴉啊什么的，編輯完成后再利用Canvas對象的toDataURL方法，就可以輸出編輯后圖片的base64數據。 細節的實現我這里就不說了。 我們再看看HTML5的file表單元素提供了什么新的支持： 1 <input type="file" accept="image/*" id="file_image" name="file_image" multiple /> 2 <input type="file" accept="video/*" id="file_video" name="file_video" /> accept屬性，可以用來限制用戶上傳文件的類型。這個屬性IOS和OSX支持得很好。 另外還有multiple屬性，意思就是可以選擇多個文件。添加了這個屬性之后，再配合FormData對象，可以實現批量上傳。 1 (function (W, D) { 2 ? ? var fileForm = document.getElementById("file_form"), 3 ? ? ? ? fileImage = document.getElementById("file_image"); 4? 5 ? ? function testAjax(files, i) { 6 ? ? ? ? if (i < 0) { 7 ? ? ? ? ? ? return ; 8 ? ? ? ? } 9? 10 ? ? ? ? var xhr = new XMLHttpRequest(), 11 ? ? ? ? ? ? data = new FormData(); 12? 13 ? ? ? ? xhr.onload = function () { 14 ? ? ? ? ? ? // 遞歸 15 ? ? ? ? ? ? testAjax(files, --i); 16 ? ? ? ? }; 17 ? ? ? ? data.append("file_image", files[i]); 18 ? ? ? ? xhr.open("post", "test/demo2.php", true); 19 ? ? ? ? xhr.send(data); 20 ? ? } 21? 22 ? ? fileForm.addEventListener("submit", function (e) { 23 ? ? ? ? e.preventDefault(); 24 ? ? ? ? var files = fileImage.files; 25? 26 ? ? ? ? testAjax(files, --files.length); 27 ? ? }, false); 28? 29 })(window, document);

轉載于:https://www.cnblogs.com/rinack/p/3299242.html

總結

以上是生活随笔為你收集整理的JavaScript怎么上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。