將表單的aciton設置為後端頁面,enctype="multipart/form-data ",type =' post '。
& 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數據會導致瀏覽器卡頓,服務器接收這類數據可能會出現問題。