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 相关文章推荐
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 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
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
高分子材料个人求职信范文
2013/09/25 职场文书
高级护理专业毕业生推荐信
2013/12/25 职场文书
十八大报告观后感
2014/01/28 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
博士生导师推荐信
2014/07/08 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS