利用Html5实现文件异步上传功能代码实例


当前第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》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...