是這樣的我下了個(gè)demo,是jquery裡面多個(gè)圖片上傳的。但是不懂他的實(shí)現(xiàn)思路。
主要就是想知道他這種將圖片上傳到頁面,然後點(diǎn)一下開始上傳就統(tǒng)一上傳是怎麼實(shí)現(xiàn)的,有勞大神們幫我大致理一下思路。
這個(gè)demo的線上演示的連結(jié)http://www.jq22.com/yanshi1604。
我覺得是這樣:
file 屬性的 input 標(biāo)籤可以選擇檔案。
選擇檔案之後,透過 input 的 files 屬性存取到 FileList 對(duì)象,裡麵包含檔案最近改變時(shí)間、檔案名稱、檔案大小以及檔案類型等資訊。在這裡可以限制傳輸檔案的大小。上面 demo 中應(yīng)該就是透過檔案名稱比對(duì)來防止上傳相同檔案。
利用 FileReader 物件的 readAsDataURL() 方法取得到圖片對(duì)應(yīng)的 base64 編碼,然後在方框中建立 img 元素,src 屬性值為這個(gè) base64,就實(shí)作了圖片預(yù)覽功能。
點(diǎn)擊上傳按鈕之後透過 AJAX 上傳到背景。
比較完整的總結(jié)可以看這篇文章。稍微簡(jiǎn)單的總結(jié)可以看我總結(jié)的筆記。