ajax 异步上传图片

最近做项目用到了ajax上传图片功能.在这里稍微做个总结.

上传图片的方式

1. 传统上传功能:缺点很明显,需要用到form表单,并且提交会伴随页面刷新,比较难用.
2. ajax异步上传:可使用json数据传输,无需form表单,只要一个button按钮即可,页面不会刷新.

ajax异步上传方法

这里分为两种:

1. 选择图片后,点击按钮上传
2. 选择图片后,立即上传,无需点击上传按钮

注:本文的demo分别实现了这两种功能.

由于代码都比较简单,这里就不贴代码了.简单说下文件结构.

tomcat启动后访问http://localhost:8080/ajaxFileUpload/ 即可

demo效果图

上传后效果