Html5文件异步上传功能的实现--百分百源码网

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

发布时间：08/01 来源：未知浏览：关键词：

本文简略介绍应用Html5的FormData实现文件的异步上传，还可以实现上传进度条和文件大小验证等，代码简略易懂，很好，拥有参照借鉴价值，需要的的伴侣参照下吧本文简略介绍应用Html5的FormData实现文件的异步上传，还可以实现上传进度条和文件大小验证等，代码简略易懂，很好，拥有参照借鉴价值，需要的的伴侣参照下吧

1 简介

开发文件上传功能素来不是一件痛快的事，异步上传更是如此，运用过iframe和Flash的上传方案，也都感觉十分的别扭。本文简要简绍应用Html5的FormData实现文件的异步上传，还可以实现上传进度条和文件大小验证等。办事端运用springMVC的方案进行处置。

2 Html代码

3 JQuery上传

$("#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文件大小验证

文件大小的及响应行为的控制，需依据需要自行处置，本办法只是示例办法。

$('#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依赖


    commons-io
    commons-io
    2.5


    commons-fileupload
    commons-fileupload
    1.3.2

6.2 servlet-context.xml

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文件异步上传功能的实现的细致内容，更多请关注百分百源码网其它相干文章！

打赏