当前第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文本格式化
HTML5 高级教程--拖放 api 实现拖放排序
HTML5新增标签有哪些
利用HTML5的一个特性- deviceorientation来实现手机上摇一摇功能
怎样用h5的sse服务器发送eventsource事件
HTML5中的postmessage api基本使用方法分享
详解HTML5应用中accordion三种效果的探索
详解HTML5移动端音频与视频问题及解决方案
HTML5开发必备-游戏开发资源合集(图文)
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 利用Html5实现文件异步上传功能代码实例