(转载学习)文件上传的渐进式加强

本文为转载学习

原文做者：阮一峰

原文连接：http://www.ruanyifeng.com/blog/2012/08/file_upload.html

HTML5提供了一系列新的浏览器API，使得文件上传有可能出现革命性变化。英国程序员Remy Sharp总结了这些新的接口，本文在他的文章基础上，讨论如何采用HTML5的API，对文件上传进行渐进式加强，实现如下功能：

　　* iframe上传

　　* ajax上传

　　* 进度条

　　* 文件预览

　　* 拖放上传

为了对这些功能有一个感性认识，你能够先看看Remy Sharp提供的范例。

虽然这些API，尚未获得普遍部署，但它们是将来的潮流。有了它们，代码就能够写得很是优雅简洁，上面五个功能都能在20行之内实现。

1、传统形式

让咱们从最基本的开始。

文件上传的传统形式，是使用表单元素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"按钮，文件开始上传。

2、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
　　};

3、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);
　　}

4、进度条

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事件。

5、图片预览

若是上传的是图片文件，利用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]);
　　　　}
　　}

6、拖放上传

最后，利用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
　　　　};
　　}