*新闻详情页*/>
1 简介
开发设计文档提交作用几乎并不是1件愉快的事,多线程提交更是这般,应用过iframe和Flash的提交计划方案,也都觉得10分的别扭。本文扼要简绍运用Html5的FormData完成文档的多线程提交,还能够完成提交进度条和文档尺寸认证等。服务端应用springMVC的计划方案开展解决。
2 Html编码
<form id="myForm"> <input type="file" id="u_photo" name="u_photo" /> <input type="button" id="submit-btn" value="提交" /> </form>
3 JQuery提交
$("#submit-btn").on('click', function() { $.ajax({ url:"/test/upload", type:"post", data:new FormData($("#myForm").get(0)), //10分关键,不可以省略 cache: false, processData: false, contentType: false, success: function () { alert("提交取得成功!"); } }); });
4 JQuery文档尺寸认证
文档尺寸的及相应个人行为的操纵,需依据必须自主解决,本方式只是示例方式。
$('#u_photo').on('change', function() { var file = this.files[0]; if (file.size > 1024*1000) { alert('文档最大1M!') } });
5 JQuery进度条
在ajax方式中添加xhr便可操纵提交进度,进度条可使用html5的progress也可以使用其它的进度条。显示信息及掩藏进度条必须自主解决,本方式只是简易详细介绍了进度条的基础操纵。
xhr: function() { var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) { myXhr.upload.addEventListener('progress', function(e) { if (e.lengthComputable) { $('progress').attr({ value: e.loaded, max: e.total, }); } } , false); } return myXhr; }
6 springMVC服务端
6.1 maven依靠
<dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.5</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.2</version> </dependency>
6.2 servlet-context.xml
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />
6.3 Controller
示例程序流程,仍未得出文档认证,储存及解决的相应编码。
@RequestMapping(value="/test/upload",method = RequestMethod.POST) @ResponseBody public String upload(@RequestParam("u_photo") MultipartFile u_photo) { System.out.println("u_photo="+u_photo.getSize()); return "ok"; }
7 适配性
IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+
8 强烈推荐阅读文章
假如对上述计划方案不令人满意,强烈推荐应用以下的处理计划方案:
JQuery File Uploader
以上所述是网编给大伙儿详细介绍的Html5完成文档多线程提交作用,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
Copyright © 2002-2020 微信小程序页面设计_python小程序_小程序首页模板_如何建立微信小程序_怎么做微信小程序 版权所有 (网站地图) 粤ICP备10235580号