目录
1. 本地tomcat保存图片
1.1 使用Jquery AjaxUpload上传图片
Jquery插件AjaxUpload实现文件上传功能时无需创建form表单,即可实现Ajax方式的文件上传,当然根据需要也可以创建form表单。
-
springmvc.xml配置CommonsMulitpartResolver
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 最大图片大小不超过5M --> <property name="maxUploadSize" value="#{5*1024*1024}"/> <!-- 编码 --> <property name="defaultEncoding" value="UTF-8"/> </bean>
-
image-upload.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片上传</title> <!-- Jquery插件AjaxUpload是根据id名字为upload这个按钮触发文件上传功能 --> 上传图片: <input type="file" id="upload" /> </head> <body> <!-- jQuery --> <script src="plugins/jquery/jquery.min.js"></script> <!-- ajax upload --> <script src="plugins/ajaxupload/ajaxupload.js"></script> <script src="dist/js/upload.js"></script> </body> </html>
对于jquery.min.js和ajaxupload.js文件文章末尾链接
-
upload.js
$(function(){ new AjaxUpload('#upload', { // 服务器端位置 action: 'images', // 文件上传名字 name: 'imageFile', // 选定后立即提交 autoSubmit: true, // 期望从服务器返回的数据类型。仅在将json数据用作响应时有用 responseType: "json", // 上传文件前触发回调, false表示取消上传 onSubmit: function (file, extension) { if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) { alert('只支持jpg、png、gif格式的图片!', { icon: