文件上传的渐进式增强
文件上传是最古老的互联网操作之一。
20多年了,它几乎没变,还是原来的样子:操作麻烦、缺乏交互、用户体验不佳。在这个新技术日新月异的时代,显得非常落伍。
网页开发者们想了很多办法,试图提升文件上传的功能和操作体验,在各种Javascript库的基础上,开发了五花八门的插件。可是,由于不同浏览器之间的差异,缺乏统一接口,这些插件要么用起来很麻烦,要么不能普遍适用。
HTML5提供了一系列新的浏览器API,使得文件上传有可能出现革命性变化。英国程序员Remy Sharp总结了这些新的接口,本文在他的文章基础上,讨论如何采用HTML5的API,对文件上传进行渐进式增强,实现以下功能:
* iframe上传
* ajax上传
* 进度条
* 文件预览
* 拖放上传
为了对这些功能有一个感性认识,你可以先看看Remy Sharp提供的范例。
虽然这些API,还没有得到广泛部署,但它们是未来的潮流。有了它们,代码就可以写得非常优雅简洁,上面五个功能都能在20行以内实现。
一、传统形式
让我们从最基本的开始。
文件上传的传统形式,是使用表单元素file:
<form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" >
<input type="file" id="upload" name="upload" /> <br />
<input type="submit" value="Upload" />
</form>
所有浏览器都支持上面的代码。它在IE浏览器中,显示如下:
用户先选择文件,然后点击"Upload"按钮,文件开始上传。
二、iframe上传
传统的表单上传,属于"同步上传"。也就是说,点击上传按钮后,网页"锁死",用户只能等待上传结束,然后浏览器刷新,跳到表单的action属性指定的网址。
有没有办法"异步上传",在网页不重载的情况下,完成整个上传过程呢?
在HTML5没有出现之前,只能使用iframe做到这一点。用户点击submit时,动态插入一个iframe元素(以下代码使用了jQuery函数库)。
var form = $("#upload-form");
form.on('submit',function() {
// 此处动态插入iframe元素
});
插入iframe的代码如下:
var seed = Math.floor(Math.random() * 1000);
var id = "uploader-frame-" + seed;
var callback = "uploader-cb-" + seed;
var iframe = $('<iframe id="'+id+'" name="'+id+'" style="display:none;">');
var url = form.attr('action');
form.attr('target', id).append(iframe).attr('action', url + '?iframe=' + callback);
最后一行,有两个地方值得注意。首先,它为表单添加target属性,指向动态插入的iframe窗口,这使得上传结束后,服务器将结果返回iframe窗口,所以当前页面就不会跳转了。其次,它在action属性指定的上传网址的后面,添加了一个参数,使得服务器知道回调函数的名称。这样就能将服务器返回的信息,从iframe窗口传到上层页面。
服务器(upload.php)返回的信息,应该是如下形式:
<script type="text/javascript">
window.top.window['callback'](data);
</script>
然后,在当前网页定义回调函数:
window[callback] = function(data){
console.log('received callback:', data);
iframe.remove(); //removing iframe
form.removeAttr('target');
form.attr('action', url);
window[callback] = undefined; //removing callback
};
三、ajax上传
HTML5提出了XMLHttpRequest对象的第二版,从此ajax能够上传文件了。这是真正的"异步上传",是将来的主流。上一节的iframe上传,可以用作老式浏览器的替代方案。
ajax上传代码,放在表单的submit事件回调函数中:
form.on('submit',function() {
// 此处进行ajax上传
});
我们主要用的是FormData对象,它能够构建类似表单的键值对。
// 检查是否支持FormData
if(window.FormData) {var formData = new FormData();
// 建立一个upload表单项,值为上传的文件
formData.append('upload', document.getElementById('upload').files[0]);var xhr = new XMLHttpRequest();
xhr.open('POST', $(this).attr('action'));
// 定义上传完成后的回调函数
xhr.onload = function () {if (xhr.status === 200) {
console.log('上传成功');
} else {
console.log('出错了');
}
};
xhr.send(formData);
}
四、进度条
XMLHttpRequest第二版还定义了一个progress事件,可以用来制作进度条。
首先,在页面中放置一个HTML元素progress。
<progress id="uploadprogress" min="0" max="100" value="0">0</progress>
然后,定义progress事件的回调函数。
xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {
var complete = (event.loaded / event.total * 100 | 0);
var progress = document.getElementById('uploadprogress');
progress.value = progress.innerHTML = complete;
}
};
注意,progress事件不是定义在xhr,而是定义在xhr.upload,因为这里需要区分下载和上传,下载也有一个progress事件。
五、图片预览
如果上传的是图片文件,利用File API,我们可以做一个图片文件的预览。这里主要用到FileReader对象。
// 检查是否支持FileReader对象
if (typeof FileReader != 'undefined') {var acceptedTypes = {
'image/png': true,
'image/jpeg': true,
'image/gif': true
};if (acceptedTypes[document.getElementById('upload').files[0].type] === true) {
var reader = new FileReader();
reader.onload = function (event) {
var image = new Image();
image.src = event.target.result;
image.width = 100;
document.body.appendChild(image);
};
reader.readAsDataURL(document.getElementById('upload').files[0]);
}
}
六、拖放上传
最后,利用HTML5的拖放功能,实现拖放上传。
先在页面中放置一个容器,用来接收拖放的文件。
<div id="holder"></div>
对它设置样式:
#holder {
border: 10px dashed #ccc;
width: 300px;
min-height: 300px;
margin: 20px auto;
}#holder.hover {
border: 10px dashed #0c0;
}
拖放文件的代码,主要是定义dragover、dragend和drop这三个事件。
// 检查浏览器是否支持拖放上传。
if('draggable' in document.createElement('span')){var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (event) {
event.preventDefault();
this.className = '';
var files = event.dataTransfer.files;
// do something with files
};
}
完成后的效果和总体代码,请看拖放上传demo。
文件上传的渐进式增强相关推荐
- Javascrpt无刷新文件上传
最近工作中遇到上传文件问题,主要需求是一步点击上传,兼容ie8+,当时用的dojox/form/uploader控件,这两天扒了一下源码,明白了原理拿出来分享一下. 总体思路如下: 1.对于支持XML ...
- 组合使用Laravel和vfsStream测试文件上传
核心要点 \ 在应用开发中,测试是很重要的,在诸多的开发工具中,测试驱动开发是很伟大的一项: \ 测试文件上传并不像人们想象的那么简单: \ 目前,有很多很棒,但不为大家所熟知的测试工具: \ Lar ...
- gz文件解压命令 linux_linux常用命令和文件上传(FZ)、解压、配置环境变量(JDK)
第141次(Linux) 学习主题:Linux 学习目标: 掌握Linux常用命令 一.Linux常用命令 1-cd命令 change directory – 切换目录 特殊目录符号 :当前目录 –' ...
- Spring Cloud Feign的文件上传实现
福利持续进行中,免费加入知识星球和斐讯K3抽奖等你来!!! 在Spring Cloud封装的Feign中并不直接支持传文件,但可以通过引入Feign的扩展包来实现,本文就来具体说说如何实现. 服务提供 ...
- 【SSM框架系列】SpringMVC的文件上传、拦截器及异常处理
SpringMVC的文件上传 服务器端实现文件上传的技术有很多种,Servlet3.0,FileUtils,框架等等,都可以实现文件上传,不管使用哪一种上传技术,都必须满足三要素: 表单项type=& ...
- web安全之文件上传漏洞攻击与防范方法
一. 文件上传漏洞与WebShell的关系 文件上传漏洞是指网络攻击者上传了一个可执行的文件到服务器并执行.这里上传的文件可以是木马,病毒,恶意脚本或者WebShell等.这种攻击方式是最为直接和有效 ...
- php forms 上传更新json_通达OA任意文件上传漏洞详细分析
影响 影响范围(但是只有V11版和2017版有包含文件的php,其余版本能上传文件.): V11版 2017版 2016版 2015版 2013增强版 2013版. 这个漏洞是几个月前的漏洞,主要是学 ...
- vc++ 6.0 创建程序快捷方式的一个例子源码_漏洞复现:phpcms v9.6.0任意文件上传漏洞(CVE201814399)...
文章说明 漏洞复现是为了学习漏洞利用所写,漏洞都是互联网上以流传已久的各种漏洞的利用及原理,用来增强自己见识,培养自己动手能力,有兴趣的朋友可自行搭建环境练习.源码下载连接在文章最后. 漏洞说明 PH ...
- Struts2框架--学习笔记(下):OGNL表达式、值栈操作、拦截器、struts2标签、文件上传
一.OGNL概述:OGNL是一种表达式 (1)在struts2中操作值栈数据. (2)一般把ognl在struts2中操作,和struts2标签一起使用操作值栈. (3)ognl不是strut2的一部 ...
最新文章
- asp.net MVC 路由
- WinForm 实现拖拽功能
- oracle将查询结果声明为伪表,Oracle查询操作(增删改查,伪表,高级查询)实例讲解...
- java数据段 静态区_linux进程的堆栈空间_代码段(指令,只读)、数据段(静态变量,全局变量)、堆栈段(局部变量)、栈【转】...
- catia将板环形弯成圆_3.4.3-Catia变换之圆形阵列命令
- Androida规划nt打包
- EasyUI DataGrid 中字段 formatter 格式化不起作用
- Git从远程主分支切换出一个开发分支
- IGMC,Inductive graph-based matrix completion,基于归纳图的矩阵完成
- Mac自带浏览器safari怎么打开开发者选项
- jar脱壳_软件脱壳 - Rannie` - 博客园
- VNCTF2021 几个题解writeup
- 前端剑法第三式————碎岩
- 各种浏览器下载tampermonkey网址
- gunicorn + Flask架构中使用多进程全局锁
- 什么是BFC?BFC的形成条件?BFC的应用场景
- wireshark抓包,丢包分析
- 陶哲轩实分析:微积分基本定理剖析
- 服务器Connections could not be acquired from the underlying database错误
- ipv6掩码格式解析
热门文章
- 【WP8】ResourceDictionary
- tomcat虚拟路径的几种配置方法
- 6位技术大咖11月倾心巨献,大数据+安全主题的技术分享合集【阿里云MVP 干货集锦】...
- 记录第一次在egret项目中使用Puremvc
- UITableView模版
- Linux vsftp配置详解
- VirtualBox虚拟机网络连接设置的四种方式
- 远程协助软件开发_这是我从事远程软件开发人员工作的主要技巧
- 已知环境静态障碍物避障_我女儿如何教我无障碍环境
- linux卸载mpfr,Red Hat Linux在安装gcc时遇到的问题汇总