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,js)
Dec 12 HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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
关于文本留言本的分页代码
2006/10/09 PHP
PHP 全角转半角实现代码
2010/05/16 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
动手学习无线电
2021/03/10 无线电
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
python处理圆角图片、圆形图片的例子
2014/04/25 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
说出数据连接池的工作机制是什么?
2013/04/19 面试题
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
生产车间主管岗位职责
2013/12/28 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
读书演讲主持词
2014/03/18 职场文书
财务担保书范文
2014/04/02 职场文书
最美家庭活动方案
2014/08/31 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
PHP新手指南
2021/04/01 PHP
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技