Html5文件异步上传功能的实现


本文摘自PHP中文网,作者巴扎黑,侵删。

本文简单介绍利用Html5的FormData实现文件的异步上传,还可以实现上传进度条和文件大小验证等,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧

1 简介

开发文件上传功能从来不是一件愉快的事,异步上传更是如此,使用过iframe和Flash的上传方案,也都感觉十分的别扭。本文简要简绍利用Html5的FormData实现文件的异步上传,还可以实现上传进度条和文件大小验证等。服务端使用springMVC的方案进行处理。

2 Html代码


1

2

3

4

<form id="myForm">

    <input type="file" id="u_photo" name="u_photo" />

    <input type="button" id="submit-btn" value="上传" />

</form>

3 JQuery上传


1

2

3

4

5

6

7

8

9

10

11

12

13

14

$("#submit-btn").on('click', function() {

    $.ajax({

        url:"/test/upload",

        type:"post",

        data:new FormData($("#myForm").get(0)),

        //十分重要,不能省略

        cache: false,

        processData: false,

        contentType: false,

        success: function () {

            alert("上传成功!");

        }

    });

});

4 JQuery文件大小验证

文件大小的及相应行为的控制,需根据需要自行处理,本方法只是示例方法。


1

2

3

4

5

6

$('#u_photo').on('change', function() {

    var file = this.files[0];

    if (file.size > 1024*1000) {

        alert('文件最大1M!')

    }

});

5 JQuery进度条

在ajax方法中加入xhr即可控制上传进度,进度条可以使用html5的progress也可使用其它的进度条。显示及隐藏进度条需要自行处理,本方法只是简单介绍了进度条的基本控制。


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文件异步上传功能的实现的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5中新特性之语义化标签的实例分析

HTML5 border属性怎么设置?HTML5 table中的border属性介绍

HTML5/css3 经典案例-无插件拖拽上传图片(一)

h5开发app可以使用什么框架

关于使用HTML5进行svg矢量图形绘制的代码

关于h5本地数据库的基本介绍(适合初学者)

h5实现文本框提示语的代码实例

html与HTML5有什么区别

服务器推送事件的详细介绍

HTML5中在可拖动的元素或选取的文本移出放置目标时执触发的事件ondragleave

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

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

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

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

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

评论

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