文件上传的渐进式增强

作者: 阮一峰

日期: 2012年8月10日

珠峰培训

文件上传是最古老的互联网操作之一。

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

(完)

QCon

腾讯课堂

留言(25条)

有非HTML5的吗?

很棒,收藏,有用!

一直用flash流的异步上传,莫非弱爆了

引用kergee的发言:

有非HTML5的吗?

Adobe Flash

比较成熟和通用的方案可以参考plupload, html5,flash,Silverlight,Gears 等等都有实现, 可以根据需求选择和安排顺序

swfupload非常好用了。

文件上传(JS能使用FileReader之类的东西以后)带来的安全性问题肿么办?

在HTML5之前,最好的办法是利用Flash 8 提供的新API,利用AS和JS的通信,除了无法实现拖拽之外,其他的几乎都可以实现,可完全自定义外观。我06年的时候用过,由于FlashPlayer的普及和升级率极高,非常适用。

当然,对Flash持反感态度的极端HTML5分子请忽略之^^

大牛~~你真是神人呀。。。涉猎的行业这么广~~~IT,金融,法律。。。。~~~

怎么做到的??

引用kergee的发言:

有非HTML5的吗?

个人喜欢使用swfupload
它使用的是flash.

但是,它使用的技术在文中已经提到,
用的是ajax以及progress技术.

总感觉这个上传进度不是真正的上传进度,快得有些假,还没得及深入研究,有经验的朋友可以说说看~

多文件上传一直没有做好,不得不依赖flash支持。虽然上传进度和拖拽上传有所改善,但无法超越flash的功能。

恩恩,这是很不错的呢啊!~ 虽然之前的都是系统的学习过html5,还没能像博主一样做出这么一个小应用。只是现在的html5兼容性还是挺差的,可能在很多浏览器上不支持

HTML5中对断点续传的支持如何呢?

引用藏章博客的发言:

恩恩,这是很不错的呢啊!~虽然之前的都是系统的学习过html5,还没能像博主一样做出这么一个小应用。只是现在的html5兼容性还是挺差的,可能在很多浏览器上不支持

不是html5的兼容性差,是IE的兼容性差。

学习了,一直在愁怎么上传

PC端的文件上传已经挺成熟,不知道阮大哥有没有研究过移动端web的文件上传呢?

必须赞一个

说得很好,但是手机上用的都不太好用呢

用表单+iframe上传,如果提交返回的是nginx错误,比如413。这样iframe里面就不是外包callback的结果。有没有较好的方案检测表单+iframe方法的服务器错误呢?

文中的:“progress事件不是定义在xhr,而是定义在xhr.upload,因为这里需要区分下载和上传,下载也有一个progress事件。”
progress 事件同时存在于下载和上传的传输。下载相关事件在 XMLHttpRequest 对象上被触发,上传相关事件在 XMLHttpRequest.upload 对象上被触发 (from MDN)
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

第六部分拖拽上传的样式应该是 #holder:hover 吧

我看错了。。。大神就是大神

请问formdata IE8/9不支持,有什么办法能兼容一下,请大神解答一下。

鼠标拖拽文件到浏览器就直接打开了 怎么禁止掉呢?

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接