html5之文件與圖片拖放上傳

前一陣子聽了前端的一個分享,其中介紹了HTML5中的一些新特性,特別感興趣的是文件上傳拖放上傳:

今晚前端同事提起,剛查了下資料,有些小失望,不過功能真的很實用。

我的理解是:

    對於圖片他們是編碼成了data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gASeGlhb25laTIyNDgxMDYzN//bAEMAAwICAwICAwMDAwQDAwQFCAUFBAQFCgcHBggMCgwMCwoLCw0OE。。。類似於這樣的格式,其實就是bas64編碼,瀏覽器所謂支持的話就是能對這種格式的數據完整的解析後然後在瀏覽器上展現圖片;文件也類似;

     另外對於編碼除了base64而外,還有二進制等編碼等,只是編碼不同而已。

     對於採用的新的方式實現後,拖放的數據應該已經上傳到服務器了,前端進度條的實現等(內存中)。而後端要獲取數據的方式跟原來是一樣的。

     HTML5這些功能的更新是使前端展現更豐富。


    至於如果實現看了下代碼,稍微瞭解下,只是以前實現過ajax的一些細節,所以纔有興趣研究下此特性。因爲對xmlhttprequest感興趣。而本次更新在這方便優化很大。

    下面是兩個HTML5在文件拖放與上傳不錯的文件,有興趣的可以去研究下。在此也記錄下:

入門中文博文

http://gandli.blog.163.com/blog/static/3084958420101023274347/

xmlhttprequest的API官網。

https://developer.mozilla.org/en/XMLHttpRequest#sendAsBinary%28%29


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章