首頁  >  文章  >  web前端  >  html5+php如何實現檔案拖曳上傳功能

html5+php如何實現檔案拖曳上傳功能

巴扎黑
巴扎黑原創
2017-03-19 14:05:421633瀏覽

[導讀] 本文章介紹了關於在html5中實現文件上傳的功能介紹,有需要的同學可以參考一下下哈。介面樣式我是參考了一個國外的相簿網站,改動不大,只是把鳥語轉換成中文,以及上傳時的樣式也進行了改動,之所以選這個

本文章介紹了關於在html5中實作檔案上傳的功能介紹,有需要的同學可以參考一下下哈。

html5+php如何實現檔案拖曳上傳功能

  介面樣式我是參考了一個國外的相簿網站,改動不大,只是把鳥語轉換成中文,以及上傳時的樣式也進行了改動,之所以選這個的原因就是,我很容易做擴展,它支援3種方式添加圖片,一種拖曳上傳,一種常規的選擇文件上傳,另外的就是添加網絡圖片。它很巧妙的把三種上傳模式整合到了一起,而且你可以用IE瀏覽器瀏覽下,如果不支援HTML5,是沒有拖曳上傳圖片的提示的,如圖:

html5+php如何實現檔案拖曳上傳功能

#  拖曳上傳最重要的就是js部分的程式碼,它實現了70%的功能,另外30%只是把圖片資訊提交到後台,然後做對應的處理,比如壓縮啊,裁剪啊雲雲。所以先來看下js實作程式碼吧。

##程式碼如下複製程式碼
#




無標題文件