HTML5 访问本地文件

afrag

Accessing the local file system from a web page has been greatly simplified in HTML5, using the File API. The File specification provides an API for representing file objects in web applications, as well as programmatically selecting them and accessing their data. The File API includes: 在HTML5中，在web页面中使用File API来访问本地文件很简单。File API提供了在web应用程序中展现文件，同时可以选择并访问文件。File API包含： FileList sequence，表示从底层系统选择的单独的文件的数组。选择文件的用户界面可以使用

1. <input type=”file”>

复制代码

来调用。 Blob接口，代表的是原始的二进制数据，并且允许范围Blob对象的字节内容。 File接口，包含了file的只读的信息，如名字、媒体类型、访问的URL等。 FileReader接口，提供了方法来读文件，还有获取读取数据的事件模型。 FileError接口和FileException异常，定义了File API使用的错误/异常。 例子是怎样工作的： 在我们给出的例子中，我们提供了一个区域，用户可以将图片文件从本地文件系统拖放到该区域，也可以通过我们提供的File选择框来讲文件添加到该区域。我们的例子只支持图片文件。为了简单起见，我们没有添加过滤文件类型的代码，也没有添加针对非图片文件的错误检测。我们的例子能运行在兼容HTML5的浏览器中，如Firefox 3.5或以后的版本。 下面是我们的例子的演示，试试将本地图片文件添加到其上。

Thumbnail palette

Drag & drop or choose images from your local file system:

主要的功能在下面的script代码中实现：

1. function imagesSelected(myFiles) {
2. for (var i = 0, f; f = myFiles[i]; i++) {
3. var imageReader = new FileReader();
4. imageReader.onload = (function(aFile) {
5. return function(e) {
6. var span = document.createElement('span');
7. span.innerHTML = ['<img class="images" src="', e.target.result,'" title="', aFile.name, '"/>'].join('');
8. document.getElementById('thumbs').insertBefore(span, null);
9. };
10. })(f);
11. imageReader.readAsDataURL(f);
12. }
13. }
15. function dropIt(e) {
16. imagesSelected(e.dataTransfer.files);
17. e.stopPropagation();
18. e.preventDefault();
19. }

复制代码

我们选择td作为我们的拖放的目的地

1. <td align="left" height="105" ondragenter="return false" ondragover="return false" ondrop="dropIt(event)">
2. <output id="thumbs"></output>
3. </td>

复制代码

下面是完整的例子代码

游客，如果你要查看本帖隐藏内容请回复

gasoline

回复好回复好回复好回复好回复好回复好回复好回复好回复好回复好回复好回复好回复好回复好回复好回复好回复好回复好回复好回复好回复好回复好回复好

来点难度

真是的，看到如此好的分享我肯定是要顶的啊！不过你想我顶多久啊，再久的话，我就顶不住了。