Javascript上传图片详解.docVIP

Javascript上传图片详解 在XMLHttpRequest Level2出台之前，大多数的异步上传图片都是利用iframe去实现的。 至于具体的实现细节，我就不在这边啰嗦的，Google一下就有文章谈这个东西。 这次主要说说，怎么用新的API去实现图片上传。 ? 首先，少不了的自然是XMLHttpRequest Level2的一些新特性啦。 其中最为实在的就是FormData对象，直接把表单(form)的DOM对象转为FormData对象，然后向服务器发送。 还有就是Progress事件的支持，异步上传终于可以查看进度条啦！ 这里我就不废话了，因为大多数人应该都看过的?阮一峰?的?《XMLHttpRequest Level 2 使用指南》，直接贴代码吧。 1 var formData= new FormData(form), 2 xhr= new XMLHttpRequest(); 3 4 xhr.open(POST, url); 5 xhr.send(formData); 接口的部分也很简单，例如PHP，直接用$_POST、$_FILES就可以拿到相关的数据. 没错，就是这么简单。 而通过监听Progress时间，就可以判断当前数据上传/下载的进度。 1 xhr.upload.onprogress = function (e) { 2 console.log(e.loaded / e.total * 100); // 上传进度 3 } 4 5 xhr.onprogress = function (e) { 6 console.log(e.loaded / e.total * 100); // 下载进度 7 } 至于XMLHttpRequest Level2的支持情况，在移动端还是比较理想的。 ? ? 一直以来，无数的前端屌丝都渴望浏览器可以提供JavaScript访问本地文件的API。 其实大老早，IE就能利用ActiveX来操作本地文件了，但因为并非W3C的标准，一直就只有IE在玩。 于25 October 2012，W3C订立了File API的草案。 另外，和File对象配套使用的，还有FileReader对象。具体有什么用后面再说。 下面是它们俩的支持度，情况比较一般。不过先学着就差不多了，哈~ ? 先说说File对象吧。 File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的?DataTransfer对象. 如下： 1 // input:file的File对象 2 document.querySelector(input[type=file]).files; // return FileList 3 4 // drop事件的File对象 5 elem.ondrop = function (e) { 6 e.preventDefault(); 7 return e.dataTransfer.files; // return FileList 8 }; 都是以一个FileList的对象返回。这个FileList的对象类似于NodeList。有length属性，但并非数组。 下面是Chrome Console打印出来的FileList对象： 再看看File对象有什么属性： 那些属性都代表什么意思我就不再废话了。但我们可以留意到，File对象是继承于Blob对象，至于什么是Blob对象，后面的篇幅咱们再提及。 ? 一开始，我们还提到一个FileReader的对象，说是配套着File对象一起用。 使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据. 具体怎么用，我们看看下面的代码： 1 // 创建一个FileReader对象 2 var reader = new FileReader(); 3 4 // 绑定load事件 5 reader.onload = function(e) { 6 console.log(e.target.result); 7 } 8 9 // 读取File对象的数据 10 reader.readAsDataURL(document.querySelector(input[type=file]).files[0]); 当FileReader对象通过readAsDataURL读取数据成功后，就会触发load事件。target中的result属性的值，就是该文件的base64数据 ? 当然，FileReader对象不