最近25學(xué)堂的幾個同學(xué)在學(xué)習(xí)一些H5方面的前端知識。

剛好跟他們學(xué)習(xí)到了一個h5案例，需要上傳圖片的功能。算是一個超級簡單的ajax 提交數(shù)據(jù)的案例。

知識點(diǎn)分析：

1、上傳圖片采用流的方式。

2、因?yàn)槭且苿佣耍奖憧焖偌虞d數(shù)據(jù)，需要給出加載動畫或者是等待提示。

3、避免重復(fù)提交圖片

為了讓更多的app設(shè)計師轉(zhuǎn)學(xué)H5前端，提供一些實(shí)用的前端js功能。

代碼如下：

前端顯示效果如下：

關(guān)于圖片上傳功能的js和jquery插件也很多。

比如jquery插件?ajaxUpload.js 也是不錯的。

案例演示地址：http://ply.se/jQuery-Ajax-Upload/demo/

源碼下載地址：https://github.com/codler/jQuery-Ajax-Upload