Html5实现文件异步上传功能


Posted in HTML / CSS onMay 19, 2017

1 简介

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

2 Html代码

<form id="myForm">
    <input type="file" id="u_photo" name="u_photo" />
    <input type="button" id="submit-btn" value="上传" />
</form>

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依赖

<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

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

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实现文件异步上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3伪类选择器:nth-child()
Apr 02 HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
css3实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 #HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 #HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 #HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 #HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 #HTML / CSS
Web前端页面跳转并取到值
Apr 24 #HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 #HTML / CSS
You might like
ThinkPHP令牌验证实例
2014/06/18 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
别了 JavaScript中的isXX系列
2012/08/01 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
详解Vue This$Store总结
2018/12/17 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
Python os库常用操作代码汇总
2020/11/03 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
关于毕业的广播稿
2014/01/10 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
小学一年级学生评语
2014/04/22 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
浅谈JavaScript作用域
2021/12/06 Javascript
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server