前端开发 ·

超简单的带加载动画的ajax无刷新图片上传案例源码分享

最近25学堂的几个同学在学习一些H5方面的前端知识。

刚好跟他们学习到了一个h5案例,需要上传图片的功能。算是一个超级简单的ajax 提交数据的案例。

知识点分析:
1、上传图片采用流的方式。
2、因为是移动端,方便快速加载数据,需要给出加载动画或者是等待提示。
3、避免重复提交图片

为了让更多的app设计师转学H5前端,提供一些实用的前端js功能。

代码如下:

12313

 

前端显示效果如下:

ajax上传图片功能

关于图片上传功能的js和jquery插件也很多。

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

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

源码下载地址:https://github.com/codler/jQuery-Ajax-Upload

 

 

 

参与评论