HTML5中File对象初探
2013-10-15 18:58
411 查看
在 HTML 5 中,JavaScript 得以获得更多的权限来处理文件,而不再像这之前,只能获得一个 file input 的 DOM。根据W3C的草案,JavaScript 被允许获得文件的"文件名","大小","文件类型"等等信息,并允许通过一些不同形式的方法,获得文件的内容,并将其通过 Ajax 传送。事实上,已经有部分浏览器开始支持这一特性。但这并不意味着在这些浏览器中可以任意地访问用户的信息,JavaScript 只能通过被动的方式获得文件,确切地说,就目前而言,可以通过 file input 和
用户的拖放操作获取到文件,这些信息,都被放在了 File 对象里面。
通过 Input 获得 File 对象的方法:
接下来为这个 input 元素添加 change 事件监听。
执行上面的代码,将会在控制台输出 File 对象,多文件形式则输出多个 File 对象。
正如代码所呈现的那样,通过监听 input 元素,change 事件被触发时,在监听函数的 this 中,多出来一个"files"的属性,关于 HTML 5 File 的玄妙就都在这里面了。
通过拖拽操作获得 File 对象的方法:
显而易见的,通过事件对象的 dataTransfer 可以得到文件,但同样需要对它进行遍历,因为现在它还是一个 fileList 。 这就是 JavaScript 的被动获取,只能通过监听事件,当用户有相应操作时,才能得到文件。这样才能确保用户的安全。
现在我们已经得到了 File 对象,接下来要考虑如何获得文件的内容。在 W3C 草案中,File 对象只包含文件名,文件类型等只读属性。但 Firefox 已经为其添加了几个实用的方法,比如:
但这并非 W3C 的标准的做法,根据其草案,有一个名为 FileReader 的类(实为对象)专门用以读取文件内容,并且可以监控读取状态。
FileReader 提供的方法包括: "readAsBinaryString" ,"readAsDataURL" ,"readAsText" ,"abort" 等。下面的代码就是一个使用 FileReader 将用户选择的图片不通过后台即时显示出来的例子。
现在我们已经可以获得文件对象,读取文件的内容,最后要考虑的问题是如何同后端进行交互,即如何将读取到的文件内容向后端发送。原理上是,通过 FileReader 的 readAsBinaryString 方法读取到文件的二进制码,然后通过 XMLHttpRequest 的 sendAsBinary 方法将其发送出去。
这样发出去的是二进制流,没有表单域,没有name,以php为例,下面的示例代码演示了后端如何接收数据,当然在实际开发中,还需要做更多。
资料:
W3C
File API
MDC
File
HTML 5 仍处于草案阶段。各浏览器支持程度不一,支持方式不一,资料匮乏,受众面狭窄,项目开发仍需量力而行。 同时欢迎大家提出自己的看法和见解,对文中的错误进行指正。
PS. 本文示例代码仅完全适用于 Firefox 3.6+ ,部分适用于其他支持 HTML 5 接口的浏览器,完全不适用于 IE8 及以下版本 。
用户的拖放操作获取到文件,这些信息,都被放在了 File 对象里面。
通过 Input 获得 File 对象的方法:
<input type="file" id="input"> <!-- 如果你愿意,可以在这个标签里写上 "Multiple" 表示支持多文件形式 -->
接下来为这个 input 元素添加 change 事件监听。
var inputElement = document.getElementById("input"); inputElement.addEventListener("change", handleFiles, false); function handleFiles(){ var fileList = this.files; for( var i = 0 ; i < fileList.length ; i++ ){ console.log(fileList[i]); } }
执行上面的代码,将会在控制台输出 File 对象,多文件形式则输出多个 File 对象。
正如代码所呈现的那样,通过监听 input 元素,change 事件被触发时,在监听函数的 this 中,多出来一个"files"的属性,关于 HTML 5 File 的玄妙就都在这里面了。
通过拖拽操作获得 File 对象的方法:
<div id="dropbox"> Drop Here </div>
var dropbox = document.getElementById("dropbox"); dropbox.addEventListener("dragenter", dragenter, false); dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("drop", drop, false); function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; //至此,已经达到了和上一种方式相同的目的 }
显而易见的,通过事件对象的 dataTransfer 可以得到文件,但同样需要对它进行遍历,因为现在它还是一个 fileList 。 这就是 JavaScript 的被动获取,只能通过监听事件,当用户有相应操作时,才能得到文件。这样才能确保用户的安全。
现在我们已经得到了 File 对象,接下来要考虑如何获得文件的内容。在 W3C 草案中,File 对象只包含文件名,文件类型等只读属性。但 Firefox 已经为其添加了几个实用的方法,比如:
//读取文件的二进制源码 var fileBinary = file.getAsBinary();
但这并非 W3C 的标准的做法,根据其草案,有一个名为 FileReader 的类(实为对象)专门用以读取文件内容,并且可以监控读取状态。
reader = new FileReader();
FileReader 提供的方法包括: "readAsBinaryString" ,"readAsDataURL" ,"readAsText" ,"abort" 等。下面的代码就是一个使用 FileReader 将用户选择的图片不通过后台即时显示出来的例子。
function handleFiles(files){
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
preview.appendChild(img);
var reader = new FileReader();reader.onload = (function(aImg){
return function(e){
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}
现在我们已经可以获得文件对象,读取文件的内容,最后要考虑的问题是如何同后端进行交互,即如何将读取到的文件内容向后端发送。原理上是,通过 FileReader 的 readAsBinaryString 方法读取到文件的二进制码,然后通过 XMLHttpRequest 的 sendAsBinary 方法将其发送出去。
var xhr = new XMLHttpRequest(); xhr.open("POST", "url"); xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); // text/plain 为你的文件类型,这可以通过 file 对象的 type 属性获取 xhr.sendAsBinary(binaryString);
这样发出去的是二进制流,没有表单域,没有name,以php为例,下面的示例代码演示了后端如何接收数据,当然在实际开发中,还需要做更多。
//方法一 $content = $GLOBALS['HTTP_RAW_POST_DATA']; file_put_contents('name.type',$content); //方法二 $content = file_get_contents("php://input"); file_put_contents('name.type', $content);
资料:
W3C
File API
MDC
File
HTML 5 仍处于草案阶段。各浏览器支持程度不一,支持方式不一,资料匮乏,受众面狭窄,项目开发仍需量力而行。 同时欢迎大家提出自己的看法和见解,对文中的错误进行指正。
PS. 本文示例代码仅完全适用于 Firefox 3.6+ ,部分适用于其他支持 HTML 5 接口的浏览器,完全不适用于 IE8 及以下版本 。
相关文章推荐
- HTML5计时器小例子
- HTML5之美: 视频播放器
- 惊艳!9个不可思议的 HTML5 Canvas 应用试验
- HTML5超帅动画制作——LTweenLite的妙用
- html5应用开发大赛
- 认识HTML5的WebSocket
- 《HTML5高级程序设计》知识点概要(不涉及详细语法)
- html5学习笔记
- html5实现的便签特效
- 分享:CSS3&HTML5各浏览器支持情况一览表
- MM应用引擎开发者大赛火热启动,iPad mini、红米手机……等你来拿!
- HTML5 canvas画矩形时出现边框样式不一致的解决方法
- 深度剖析IE10对HTML5 Canvas支持及实例教程(一)
- html5声频audio和视频video
- html5-Canvas绘图
- html5之Canvas坐标变换应用-时钟实…
- html5-web本地存储
- html5&nbsp;canvas&nbsp;如何清空之前绘制的…
- HTML5 Audio/Video 标签,属性,方法,事件汇总
- HTML5超帅动画制作-LTweenLite的妙用