[導讀] 本文章介紹了關於在html5中實現文件上傳的功能介紹,有需要的同學可以參考一下下哈。介面樣式我是參考了一個國外的相簿網站,改動不大,只是把鳥語轉換成中文,以及上傳時的樣式也進行了改動,之所以選這個
本文章介紹了關於在html5中實作檔案上傳的功能介紹,有需要的同學可以參考一下下哈。
介面樣式我是參考了一個國外的相簿網站,改動不大,只是把鳥語轉換成中文,以及上傳時的樣式也進行了改動,之所以選這個的原因就是,我很容易做擴展,它支援3種方式添加圖片,一種拖曳上傳,一種常規的選擇文件上傳,另外的就是添加網絡圖片。它很巧妙的把三種上傳模式整合到了一起,而且你可以用IE瀏覽器瀏覽下,如果不支援HTML5,是沒有拖曳上傳圖片的提示的,如圖:
# 拖曳上傳最重要的就是js部分的程式碼,它實現了70%的功能,另外30%只是把圖片資訊提交到後台,然後做對應的處理,比如壓縮啊,裁剪啊雲雲。所以先來看下js實作程式碼吧。
複製程式碼 | |
# |