亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

html5 多圖片上傳

html5 多圖片上傳

慕森卡 2018-11-16 13:15:53
是這樣的我下了個demo,是jquery里面多個圖片上傳的。但是不懂他的實現思路。主要就是想知道他這種將圖片上傳到頁面,然后點一下開始上傳就統一上傳是怎么實現的,有勞大神們幫我大致理一下思路。這個demo的在線演示的鏈接http://www.jq22.com/yanshi1604。
查看完整描述

1 回答

?
米脂

TA貢獻1836條經驗 獲得超3個贊

我覺得是這樣:

  1. file 屬性的 input 標簽可以選擇文件。

  2. 選擇文件之后,通過 input 的 files 屬性訪問到 FileList 對象,里面包含文件最近改動時間、文件名、文件大小以及文件類型等信息。在這里可以限制傳輸文件的大小。上面 demo 中應該就是通過文件名比對來防止上傳相同文件。

  3. 利用 FileReader 對象的 readAsDataURL() 方法獲取到圖片對應的 base64 編碼,然后在方框中創建 img 元素,src 屬性值為這個 base64,就實現了圖片預覽功能。

  4. 點擊上傳按鈕之后通過 AJAX 上傳到后臺。

比較完整的總結可以看這篇文章。稍微簡單的總結可以看我總結的筆記。


查看完整回答
反對 回復 2018-12-12
  • 1 回答
  • 0 關注
  • 495 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號