書寫是為了更好的記憶。

方案一：form表單上傳

該方案優點是支持好，缺點刷新頁面。

<form action="url" method="post" enctype="multipart/form-data"><input type="file" name="file"><input type="submit" value="提交"> </form>

原理：enctype就是form上傳文件的重點。

值描述

application/x-www-form-urlencoded	默認。在發送前對所有字符進行編碼（將空格轉換為 "+" 符號，特殊字符轉換為 ASCII HEX 值）
multipart/form-data	不對字符編碼。當使用有文件上傳控件的表單時，該值是必需的
text/plain	將空格轉換為 "+" 符號，但不編碼特殊字符

方案二：form表單上傳-優化方案一缺點

該方案的優點也是支持好，缺點是不支持跨域。

<form action="url" method="post" enctype="multipart/form-data" target="iframe"><input type="file" name="file"><input type="submit" value="提交"> </form>

原理：通過target把響應指向一個iframe頁面，之后拿到返回數據。

值描述

_blank	在新窗口/選項卡中打開
_self	默認， 在同一框架中打開
_parent	在父框架中打開。
_top	在整個窗口中打開
framename	在指定的 iframe 中打開

方案三：ajax上傳-優化方案二缺點

該方案的缺點兼容問題-caniuse，兼容有兩個方向一是低版本ie不支持CORS跨域，一個就是input新加的Files。優點就是異步，進度條，判斷大小，處理，跨域。

var file = input.files[0]; var xhr = new XMLHttpRequest(); if (xhr.upload) {xhr.upload.addEventListener("progress", function(e) {console.log(file, e.loaded, e.total);}, false);// 文件上傳成功或是失敗xhr.onreadystatechange = function(e) {if (xhr.readyState == 4) {if (xhr.status == 200) {console.log('成功', xhr.responseText)} else {console.log('失敗') }}}// 開始上傳xhr.open("POST", 'url', true);xhr.send(file); }

方案四：ajax-formData上傳-多字段多文件；

該方案基本同上，只不過使用了FormData，缺點就是formData的兼容

var formData = new FormData(); formData.append('file', input.files[0]); xhr.send(formData);

其他方案：

1. SWFupload Flash上傳 2. jquery.form.js 其他插件上傳

需求一：拖拽上傳

使用drop事件，獲取e.dataTransfer

document.querySelector('body').addEventListener("drop", (e)=>{e.preventDefault();//不寫的話，就打開了console.log(e.dataTransfer.files[0]) });

需求二：截圖-粘貼-上傳

使用paste事件，獲取e.clipboardData

document.querySelector('body').addEventListener("paste", (e)=>{e.preventDefault();//不寫的話，就打開了console.log(e.clipboardData.files[0]) });

需求三：base64轉換上傳

場景發生在，一個和客戶端交互的情況下，客戶端選擇的圖片之后返給我了一個base64，讓我上傳這個，而且接口那邊還不改，就要文件。代碼寫的比較啰嗦，其實也用不了這么多東西，當時也是第一次接觸atob、Blob、ArrayBuffer這些東西，就寫成這樣了。

function(data){var _str = atob(data.base64Str)var _filePath = ((data.filePath.match(/.(jpg|jpeg|png|bmp)$/) || [])[1] || 'png').toLowerCase();var _filePathHash = {jpg:'image/jpeg',jpeg:'image/jpeg',png: 'image/png',bmp:'application/x-bmp',}var pre = '--------------------------1\r\nContent-Disposition: form-data; name="file"; filename="1.png"\r\nContent-Type: '+_filePathHash[_filePath]+'\r\n\r\n';var end = '\r\n--------------------------1--';var buffer = new ArrayBuffer(_str.length);var uint8 = new Uint8Array(buffer);for(var i in _str){uint8[i] = _str.charCodeAt(i);}var blob = new Blob([pre, uint8, end], {type: _filePathHash[_filePath]});var oReq = new XMLHttpRequest();oReq.open("POST", "url", true);oReq.setRequestHeader("Content-Type", "multipart/form-data; boundary=------------------------1")oReq.onreadystatechange=function(){if (oReq.readyState==4 && oReq.status==200){console.log(oReq.responseText); }oReq.send(blob);

需求四

上傳一般來說都是要寫樣式的，不能說光是默認的input樣式就ok，但是呢，樣式又不是那么太好寫，我們怎么辦呢？

方案一

label標簽的for去觸發input的單擊，這樣不就好了嗎？input的樣式不好寫，那我們把他藏起來，給label寫樣式。

方案二

input[type=file]左邊是一個input右邊是個按鈕，其實是按鈕的樣式不好改，那么我們外面包裹一層overlfow:hidden，然后給input設置成一個極大，讓他所有不一樣的東西，都超出去，這樣就是在能改動的區域改動了

總結

以上是生活随笔為你收集整理的前端文件上传-javascript-ajax的全部內容，希望文章能夠幫你解決所遇到的問題。

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