当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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依赖
1 2 3 4 5 6 7 8 9 10 | <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
1 | <bean id= "multipartResolver" class = "org.springframework.web.multipart.commons.CommonsMultipartResolver" />
|
6.3 Controller
示例程序,并未给出文件验证,存储及处理的相应代码。
1 2 3 4 5 6 | @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实现文件异步上传功能代码实例的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
h5视频中背景音乐如何自动播放
HTML5中dialog元素的详细讲解(代码示例)
零基础学习HTML5
HTML5语义化标签及兼容性处理详解
javascript中比较运算符隐式类型转换的介绍(附示例)
如何使用HTML5 shiv解决ie不兼容HTML5标签的方法
详解HTML5地理定位与第三方工具百度地图的应用
HTML5是什么技术
HTML5前端是什么?
HTML5在工作中主要干什么
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 利用Html5实现文件异步上传功能代码实例