文件上传是最古老的互联网操作之一。
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。
(完)
kergee 说:
有非HTML5的吗?
2012年8月10日 13:59 | # | 引用
南拳nuanquan 说:
很棒,收藏,有用!
2012年8月10日 14:27 | # | 引用
锐齿猱 说:
一直用flash流的异步上传,莫非弱爆了
2012年8月10日 14:40 | # | 引用
匿名诺夫 说:
Adobe Flash
2012年8月10日 14:57 | # | 引用
Gemili 说:
比较成熟和通用的方案可以参考plupload, html5,flash,Silverlight,Gears 等等都有实现, 可以根据需求选择和安排顺序
2012年8月10日 16:35 | # | 引用
无名 说:
swfupload非常好用了。
2012年8月10日 16:43 | # | 引用
rhapsodyn 说:
文件上传(JS能使用FileReader之类的东西以后)带来的安全性问题肿么办?
2012年8月10日 17:03 | # | 引用
awguo 说:
在HTML5之前,最好的办法是利用Flash 8 提供的新API,利用AS和JS的通信,除了无法实现拖拽之外,其他的几乎都可以实现,可完全自定义外观。我06年的时候用过,由于FlashPlayer的普及和升级率极高,非常适用。
当然,对Flash持反感态度的极端HTML5分子请忽略之^^
2012年8月10日 18:19 | # | 引用
fc_lamp 说:
大牛~~你真是神人呀。。。涉猎的行业这么广~~~IT,金融,法律。。。。~~~
怎么做到的??
2012年8月13日 10:25 | # | 引用
Walkerinwind 说:
个人喜欢使用swfupload
它使用的是flash.
但是,它使用的技术在文中已经提到,
用的是ajax以及progress技术.
2012年8月14日 10:34 | # | 引用
ReeQi 说:
总感觉这个上传进度不是真正的上传进度,快得有些假,还没得及深入研究,有经验的朋友可以说说看~
2012年8月14日 13:03 | # | 引用
canic 说:
多文件上传一直没有做好,不得不依赖flash支持。虽然上传进度和拖拽上传有所改善,但无法超越flash的功能。
2012年8月14日 23:38 | # | 引用
藏章博客 说:
恩恩,这是很不错的呢啊!~ 虽然之前的都是系统的学习过html5,还没能像博主一样做出这么一个小应用。只是现在的html5兼容性还是挺差的,可能在很多浏览器上不支持
2012年8月15日 17:44 | # | 引用
bruceel 说:
HTML5中对断点续传的支持如何呢?
2012年8月16日 18:33 | # | 引用
Frank 说:
不是html5的兼容性差,是IE的兼容性差。
2012年8月29日 12:54 | # | 引用
潜行者m 说:
学习了,一直在愁怎么上传
2012年9月 6日 13:08 | # | 引用
死战 说:
PC端的文件上传已经挺成熟,不知道阮大哥有没有研究过移动端web的文件上传呢?
2014年10月15日 23:06 | # | 引用
xin 说:
必须赞一个
2015年10月 7日 22:37 | # | 引用
李江民 说:
说得很好,但是手机上用的都不太好用呢
2015年10月16日 14:20 | # | 引用
min 说:
用表单+iframe上传,如果提交返回的是nginx错误,比如413。这样iframe里面就不是外包callback的结果。有没有较好的方案检测表单+iframe方法的服务器错误呢?
2016年3月31日 20:49 | # | 引用
何足道 说:
文中的:“progress事件不是定义在xhr,而是定义在xhr.upload,因为这里需要区分下载和上传,下载也有一个progress事件。”
progress 事件同时存在于下载和上传的传输。下载相关事件在 XMLHttpRequest 对象上被触发,上传相关事件在 XMLHttpRequest.upload 对象上被触发 (from MDN)
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
2016年8月19日 16:42 | # | 引用
zhaolina 说:
第六部分拖拽上传的样式应该是 #holder:hover 吧
2016年12月 6日 20:01 | # | 引用
zhaolina 说:
我看错了。。。大神就是大神
2016年12月 6日 21:16 | # | 引用
Bo 说:
请问formdata IE8/9不支持,有什么办法能兼容一下,请大神解答一下。
2017年4月18日 10:24 | # | 引用
红苹果 说:
鼠标拖拽文件到浏览器就直接打开了 怎么禁止掉呢?
2018年5月29日 17:20 | # | 引用