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 选择器 属性选择器介绍
Jan 21 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 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函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
Python数学形态学实例分析
2019/09/06 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
精细化工应届生求职信
2013/11/17 职场文书
公司活动邀请函
2014/01/24 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
护士个人年度总结范文
2015/02/13 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
Python实现学生管理系统(面向对象版)
2021/06/24 Python