HTML5 之文件操作(file)

前言

在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建。

该元素包含一个文本输入字段,用来输入文件名,还有一个按钮,用来打开文件选择对话框以便图形化选择文件。

该元素的 value 属性保存了用户指定的文件的名称,但是当包含一个 file-upload 元素的表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。

当用户选择或编辑一个文件名,file-upload 元素触发 onchange 事件句柄。

看个简单例子:

[html] view plaincopy

  1. <!-- oscar999  -->
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <html>
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6. <meta name="author" content="oscar999">
  7. <title></title>
  8. <script>
  9. function  handleFiles(files)
  10. {
  11. if(files.length)
  12. {
  13. var file = files[0];
  14. var reader = new FileReader();
  15. reader.onload = function()
  16. {
  17. document.getElementById("filecontent").innerHTML = this.result;
  18. };
  19. reader.readAsText(file);
  20. }
  21. }
  22. </script>
  23. </head>
  24. <body>
  25. <input type="file" id="file" onchange="handleFiles(this.files)"/>
  26. <div id="filecontent"></div>
  27. </body>
  28. </html>

这里读取一个文件, 显示在div 中。

(在IE8 中 无效, this.files 无法读取文件。这个属于html5 的特性)

当选择了一个文件时,就会把包含这个文件的列表(一个FileList对象)作为参数传给handleFiles()函数了。
这个FileList对象类似一个数组,可以知道文件的数目,而它的元素就是File对象了。
从这个File对象可以获取name、size、lastModifiedDate和type等属性。
把这个File对象传给FileReader对象的读取方法,就能读取文件了。

HTML5 Drag and Drop File

HTML5 支持的File 的操作不仅仅是文件的选择,

在HTML5 之前需要使用 Applet 和 SilverLight 才能达到的文件拖拽功能,在HTML5 中也能轻松的实现,

看代码:

[html] view plaincopy

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5. <meta name="author" content="oscar999">
  6. <title></title>
  7. </head>
  8. <body>
  9. <div id="dropbox"> Drop Here </div>
  10. <div id="filecontent"></div>
  11. <script>
  12. var dropbox = document.getElementById("dropbox");
  13. dropbox.addEventListener("dragenter", dragenter, false);
  14. dropbox.addEventListener("dragover", dragover, false);
  15. dropbox.addEventListener("drop", drop, false);
  16. function dragenter(e) {
  17. e.stopPropagation();
  18. e.preventDefault();
  19. }
  20. function dragover(e) {
  21. e.stopPropagation();
  22. e.preventDefault();
  23. }
  24. function drop(e) {
  25. e.stopPropagation();
  26. e.preventDefault();
  27. var dt = e.dataTransfer;
  28. var files = dt.files;
  29. if(files.length)
  30. {
  31. var file = files[0];
  32. var reader = new FileReader();
  33. reader.onload = function()
  34. {
  35. document.getElementById("filecontent").innerHTML = this.result;
  36. };
  37. reader.readAsText(file);
  38. }
  39. }
  40. </script>
  41. </body>
  42. </html>

这里通过事件对象的 dataTransfer 可以得到文件。

读取文件内容

在第一个例子中, 我们使用 FileReader类来读取文件的内容,

在 W3C 草案中,File 对象只包含文件名,文件类型等只读属性;FileReader用于内容读取和监控读取状态。

(在firefox 中, 可以直接使用 var fileBinary = file.getAsBinary();  读取文件的二进制源码)

FileReader提供的方法包括:

1. readAsBinaryString

2. readAsDataURL

3. readAsText

4. abort

.........

以下,举一个 使用 FileReader 将用户选择的图片不通过后台即时显示出来的例子。

[html] view plaincopy

  1. function handleFiles(files){
  2. for (var i = 0; i < files.length; i++) {
  3. var file = files[i];
  4. var imageType = /image.*/;
  5. if (!file.type.match(imageType)) {
  6. continue;
  7. }
  8. var img = document.createElement("img");
  9. img.classList.add("obj");
  10. img.file = file;
  11. preview.appendChild(img);
  12. var reader = new FileReader();
  13. reader.onload = (function(aImg){
  14. return function(e){
  15. aImg.src = e.target.result;
  16. };
  17. })(img);
  18. reader.readAsDataURL(file);
  19. }
  20. }

同后端的交互

在一般的HTML  中,使用方式是把file input 放在form 中, 以POST 方式把文件传递到后端。

在 HTML5 中, 也可以通过 FileReader 的 readAsBinaryString 方法读取到文件的二进制码,然后通过 XMLHttpRequest 的 sendAsBinary 方法将其发送出去。

[javascript] view plaincopy

  1. var xhr = new XMLHttpRequest();
  2. xhr.open("POST", "url");
  3. xhr.overrideMimeType(‘text/plain; charset=x-user-defined-binary‘);
  4. <pre code_snippet_id="422893" snippet_file_name="blog_20140709_4_2106578" class="sh_javascript sh_sourceCode" name="code">xhr<span class="sh_symbol">.</span><span class="sh_function">sendAsBinary</span><span class="sh_symbol">(</span>binaryString<span class="sh_symbol">);</span></pre><br>

参考

浏览器支持

适用于 Firefox 3.6+ ,Chrome ,部分适用于其他支持 HTML 5 接口的浏览器,完全不适用于 IE8 及以下版本

转自 http://blog.csdn.net/oscar999/article/details/37499743

时间: 2024-09-30 23:58:12

HTML5 之文件操作(file)的相关文章

[JS进阶] HTML5 之文件操作(file)

前言 在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建. 该元素包含一个文本输入字段,用来输入文件名,还有一个按钮,用来打开文件选择对话框以便图形化选择文件. 该元素的 value 属性保存了用户指定的文件的名称,但是当包含一个 file-upload 元素的表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名. 当用户选择或编辑一个文件名,file-upload 元素触发 onc

HTML5 本地文件操作之FileSystemAPI实例(二)

文件操作实例整理二 1.删除文件.复制文件.移动文件 //获取请求权限 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler); function initFs(fs) { //删除文件 fileEntry.remove() fs.

HTML5 本地文件操作之FileSystemAPI整理(一)

一.请求配额 DeprecatedStorageInfo对象 window.webkitStorageInfo:当使用持久存储模式时需要用到该对象的接口 方法: 1.requestQuota(type,size,successCB,errorCB);请求配额 2.queryUsageAndQuota();获取配额信息 window.requestFileSystem(window.PERSISTENT, gratedBytes, initFs, errorHandler); DOMFileSys

HTML5 本地文件操作之FileSystemAPI实例(三)

文件夹操作demo 1.读取根目录文件夹内容 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(window.PERSISTENT, 5 * 1024, initFs, errorHandler); function initFs(fs) { //显示根目录下的内容 var dirReader = fs.root.creat

HTML5 本地文件操作之FileSystemAPI实例(四)

目录操作Demo二 1.删除目录 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(window.PERSISTENT, 5 * 1024, initFs, errorHandler); function initFs(fs) { //删除目录,子目录创建需要递归,获取可以直接指定'/' //如果子目录不存在,抛出删除异常

php基础知识总结(2)文件操作file

一.路径 1.dirname -- 返回路径中的目录部分      $path = "/etc/passwd";      $file = dirname($path); // "/etc" 2.basename -- 返回路径中的文件名部分     $path = "/home/httpd/html/index.php";     $file = basename($path);        // index.php     $file =

html5之文件操作

用来把文件读入内存,并且读取文件中的数据.FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据.到目前文职,只有FF3.6+和Chrome6.0+实现了FileReader接口. 1.FileReader接口的方法 FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取.无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中. FileReader接口的方法 方法名 参数 描述 readAsB

黑马程序员——JAVA学习笔记十一(文件操作File)

为了很方便的代表文件的概念,以及存储一些对于文件的基本操作,在java.io包中设计了一个专门的类——File类. 在File类中包含了大部分和文件操作的功能方法,该类的对象可以代表一个具体的文件或文件夹,所以以前曾有人建议将该类的类名修改成FilePath,因为该类也可以代表一个文件夹,更准确的说是可以代表一个文件路径. 1.创建文件 1)boolean java.io.File.createNewFile() throws IOException用来创建文件,如果文件存在,创建失败,返回fa

Java 文件操作-File

1.File文件操作 java.io.File用于表示文件(目录),也就是说程序员可以通过File类在程序中操作硬盘上的文件和目录.File类只用于表示文件(目录)的信息(名称.大小等),不能对文件的内容进行访问. 1)构造方法      构造方法一:File(String pathname) 通过将给定路径名字符串转换成抽象路径名来创建一个新File实例 抽象路径应尽量使用相对路径,并且目录的层级分隔符不要直接写"/"或"\",因为不同的系统用的分隔符不一样,应该