Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

Ajax上传文件(HTML5)

  昨天的文章中说了如何读取客户的文件,今天我们就来把读取到的文件使用Ajax的方式上传的服务器。其实这是很容易的事情,我们只要创建一个XHR对象,然后把数据POST过去就好了。但是HTTP协议对数据的格式要求很高,按照HTTP的参数格式还需要拼凑一个POST参数模板才行。这就需要计算大小、生成Boundary等等一些列麻烦的工作。所以,直接使用传统的方法POST一个数据包虽然可以实现,但是很麻烦。
  HTML5中提供了FormData对象,这个对象可以作为XHR对象send方法的参数,这就省去了平凑POST参数模板的麻烦。而且,FormData可以直接以File对象作为post的数据字段值,这就可以省去了使用FileReader读文件的步骤。下面是它的使用例子: <script>
//拖拽文件事件
document.ondragover=function(e){e.preventDefault()};
document.ondrop=function(e){
  //创建XHR和FD对象
  var xhr=new XMLHttpRequest,
      dat=new FormData;
  //Ajax
  xhr.open("POST","uploader.php",true);
  xhr.onreadystatechange=function(){
    if(xhr.readyState!=4)return;
    //接收到服务器返回的数据并输出
    alert(xhr.responseText);
  };
  //向FD对象添加参数
  dat.append("f",e.dataTransfer.files[0]);
  //发送
  xhr.send(dat);
  //阻止默认拖拽动作
  e.preventDefault();
};
</script>
//uploader.php
echo "文件大小:".$_FILES['f']['size']."Byte";

  这就是最简单的上传例子了,但是只有这个显然不能满足需求,我们还需要一个进度条。在HTML5的XHR对象中有个upload属性(虽然是非标准的),这个属性实际上就是XHR对象在上传时的进度对象,我们可以通过它实现进度条。进度条的UI效果我就不做了,只演示数据效果。给xhr对象的upload属性对象加上progress事件的代码片段: xhr.upload.onprogress=function(e){
  var p=e.loaded/e.totalSize*10000;
  console.log(Math.round(p)/100+"%");
};

  这样HTML5上传文件必须的功能就基本都实现了,但时候为了兼容低版本浏览器,通常会用AS做另一个版本的文件上传。这都是后话了,这篇文章先到这儿吧。。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^