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实现简易版的刮刮乐效果
Sep 27 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
CSS3中的content属性使用示例
Jul 20 HTML / CSS
详解CSS中iconfont的使用
Aug 04 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 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之R方法实例详解
2014/06/20 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
JS分页效果示例
2013/10/11 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
Python实现从url中提取域名的几种方法
2014/09/26 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
Python读写zip压缩文件的方法
2018/08/29 Python
python中map的基本用法示例
2018/09/10 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
求职信的最佳写作思路
2014/02/01 职场文书
职称评定自我鉴定
2014/03/18 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
年终晚会活动方案
2014/08/21 职场文书
高中生学习计划书
2014/09/15 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
Java并发编程之Executor接口的使用
2021/06/21 Java/Android