【方法】Html5实现文件异步上传

justCoding 发布于2019-08-20 16:41 / 1702人阅读

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

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

云服务器 idc机房托管异步文件上传 Java异步上传文件文件异步上传文件到云服务器 ie8异步上传文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83093.html

H5拖放+FormData接口+NodeJS，完整异步文件上传（一）

摘要：前段时间面试过程中，频繁遇到异步文件上传的相关问题。所以，这会是一个拖放接口实现文件异步上传的完整。监听放置元素的事件，通过对象可以获得拖拽事件的状态及数据。后端文件接收保存后端使用实现文件上传。前段时间面试过程中，频繁遇到H5异步文件上传的相关问题。还遇到过一个通过H5拖放功能实现文件异步上传的问题，大概知道H5有新增拖拽功能可以接收文件，如何异步上传文件就母鸡了(摊手)。面试...

NervosNetwork 2019-08-22 15:57 评论0 收藏0
H5拖放+FormData接口+NodeJS，完整异步文件上传（一）

摘要：前段时间面试过程中，频繁遇到异步文件上传的相关问题。所以，这会是一个拖放接口实现文件异步上传的完整。监听放置元素的事件，通过对象可以获得拖拽事件的状态及数据。后端文件接收保存后端使用实现文件上传。前段时间面试过程中，频繁遇到H5异步文件上传的相关问题。还遇到过一个通过H5拖放功能实现文件异步上传的问题，大概知道H5有新增拖拽功能可以接收文件，如何异步上传文件就母鸡了(摊手)。面试...

wenshi11019 2019-08-05 13:25 评论0 收藏0
PHP_Ajax

摘要：简介业务做一个在线投票，给歌手投票。提交到当前页面的中达到效果。用户名密码注册总结在不使用对象的情况下，依然可以用来实现对后台服务器的请求，同时不带来页面刷新或者跳转。 ajax 简介业务：做一个在线投票，给歌手投票。要求：无刷新，并且不允许使用XMLHttpRequest对象.分析:在XHR对象，没有流行之前，已经有了无刷新这种效果的方法. 从http角度看，可以利用204 No...

MiracleWong 2019-06-27 15:05 评论0 收藏0
API

摘要：是一个极度纯净的上传插件，通过简单调整就可以融入到任何项目，支持多文件上传上传速率动态控制真实进度监控分块生成分块上传校验秒传暂停取消等。跨域学习笔记前言: 当一个资源，向与之所在服务器不同的域或端口请求另一个资源时，这个HTTP请求，我们认为是跨域的请求。出于安全考虑，浏览器会限制脚本发起的跨域HTTP请求。那天后端让我把token放到http请求头字段里，说是为了和RN端统一...

lsxiao 2019-08-21 18:25 评论0 收藏0
上传图片本地预览效果实现（兼容IE8）

摘要：以上传图片为例。我们可以通过获取上传的图片相关信息，但是想要实现本地预览还需要借助来实现可以读取本地图片，并将图片数据转换成编码的字符串形式嵌入到页面中。在我们实现上传图片的效果里，就有用到。图片预览兼容处理及以下版本不支持和。最近项目里需要用到上传图片并预览的功能，于是写了个jQuery预览图片插件，下载地址。如果有需要的，可以直接下载。第一次写jQuery插件，如有不对之处，欢迎...

avwu 2019-08-20 16:54 评论0 收藏0