& 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數據會導致瀏覽器卡頓,服務器接收這類數據可能會出現問題。

  • 上一篇:農產品消費狀況是什麽意思,高壹地理湘教版
  • 下一篇:在千年永定乾坤位打壹個正確的生肖
  • 相关文章
  • 小型壓面機的價格是多少?小型壓面機怎麽用?
  • 花樣饅頭的做法和圖片
  • 如何在國際上傳播篆刻?
  • 什麽是線描?
  • 古印度的宗教文化有哪些?
  • 怎樣才能更好的預防跟腱損傷?
  • 徐州洪飛電網(集團)有限公司怎麽樣?
  • copyright 2024吉日网官网