& lt形式？action='/'？enctype="multipart/form-data "？type = ' post ' & gt& lt輸入？type = ' file ' & gt& lt輸入？type='hidden '？name = ' userid ' & gt& lt輸入？type='hidden '？name = ' signature ' & gt& ltbutton & gt使服從

type = ' submit ' & gt按鈕觸發，二是執行js中的form.submit()方法。

優點:使用簡單方便，兼容性好，基本上所有瀏覽器都支持。

缺點:1。提交數據後，頁面會跳轉(如何禁止頁面跳轉將在下面討論)。

2.因為是瀏覽器發起的請求，不是ajax，前端無法知道上傳什麽時候完成。

3.在壹個表單中發送文件以外的數據，壹般是新建壹個type=hidden input，value = ' data to transmit '。每次發送數據都需要壹個輸入，這會讓dom顯得多余。

提示:

提交數據後，表單將自動跳轉到action指定的頁面。為了禁止頁面跳轉，可以在頁面中創建壹個空的ifame，比如name='upload '，然後設置表單的target="Uploader "。表單有壹個target屬性，該屬性指定在何處打開操作，這樣表單在提交數據後將保留在當前頁面中。代碼如下:

& lt形式？action='/'？enctype="multipart/form-data "？type='post '？target="uploader1 " >& lt輸入？type = ' file ' & gt& ltbutton & gt使服從

' UploadFile.php '，假設頁面處理完數據後返回壹個地址，這個地址會被寫入前面的iframe中。所以當觸發iName的onload函數時，也就是上傳完成後，就可以在iframe中讀取後端返回的數據了。

var？iframe？=?document . getelementbyid(' upload 1 ')；

iframe.onload？=?功能？()?{?

var？醫生。=?window . frames[' uploader 1 ']。文檔；var？pre？=?doc . getelementsbytagname(' pre ')；var？obj？=?JSON.parse(pre[0])。innerHTML)；

}使用此方法時，需要註意的是，iframe有跨域限制，如果創建的iframe的地址與當前頁面地址不同，會報錯。在這種情況下，建議妳從後端請求壹個接口，在iframe的onload函數中獲取文件地址，而不是直接在iframe中讀取。或者返回這樣的數據。

& lt劇本？type = " text/JavaScript " & gt；window . top . window[回調](數據)& lt/script & gt；回調是壹個和前端約定好的名字。上傳完成後，觸發該函數，返回後端數據。

第二種:使用formData上傳。

用js來構造表單的數據簡單高效，但是只兼容IE10，所以需要兼容IE9的童鞋要跳過這個方法。

html:

& lt輸入？type = ' file ' & gtjs:

var？formData？=?新的？FormData()；

formData.append("userid "，userid)；

formData.append("signature "，簽名)；

formData.append("file "，文件)；？//文件是blob數據//然後使用ajax將formData發送到服務器。註意壹定要郵寄上傳。

描述:第壹種方法提到創建多個類型為“hidden”的輸入來發送簽名數據。在這裏，可以使用formData.append方法來代替這個操作，這樣可以避免在dom中出現多個輸入。最後，文件數據也被追加到formData中，並發送到服務器以完成上傳。

優點:因為這種方法是ajax上傳，所以可以準確的知道上傳完成的時間，還可以方便的接收回調數據。

缺點:兼容性差

第三種:使用fileReader讀取文件數據並上傳。

HTML5的新api兼容性不是特別好，只兼容IE10。

var？弗雷德？=?新的？FileReader()；

fr.readAsDataURL(文件)；

fr.onload？=?功能？(事件)？{var？數據=？事件.目標.結果；？//這裏得到的數據是base64格式的數據img.src？=?數據；

ajax(url，{data}？，function(){})

}上面得到的數據可以用來實現圖片上傳前的本地預覽，也可以用來向後端發送base64數據然後返回數據塊的對應地址。

優點:？和第二個壹樣。

缺點:壹次發送大量base64數據會導致瀏覽器卡頓，服務器接收這類數據可能會出現問題。