首页 > 代码库 > HTML5 之文件操作(file)

HTML5 之文件操作(file)

2024-10-27 11:44:02   207人阅读

前言

在 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.     
  24.   </head>  
  25.   <body>  
  26.   
  27.   <input type="file" id="file" onchange="handleFiles(this.files)"/>  
  28.   <div id="filecontent"></div>  
  29.   </body>  
  30. </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.   
  17.     function dragenter(e) {    
  18.         e.stopPropagation();    
  19.         e.preventDefault();    
  20.     }    
  21.   
  22.     function dragover(e) {    
  23.         e.stopPropagation();    
  24.         e.preventDefault();    
  25.     }  
  26.   
  27.     function drop(e) {    
  28.         e.stopPropagation();    
  29.         e.preventDefault();     
  30.         var dt = e.dataTransfer;    
  31.         var files = dt.files;  
  32.         if(files.length)  
  33.         {  
  34.            var file = files[0];  
  35.            var reader = new FileReader();  
  36.            reader.onload = function()  
  37.            {  
  38.                document.getElementById("filecontent").innerHTML = this.result;  
  39.            };  
  40.            reader.readAsText(file);  
  41.         }  
  42.     }   
  43.             
  44.     </script>  
  45.   </body>  
  46. </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.           
  6.         if (!file.type.match(imageType)) {  
  7.             continue;  
  8.         }  
  9.           
  10.         var img = document.createElement("img");  
  11.         img.classList.add("obj");  
  12.         img.file = file;  
  13.         preview.appendChild(img);  
  14.           
  15.         var reader = new FileReader();  
  16.         reader.onload = (function(aImg){  
  17.             return function(e){  
  18.                 aImg.src = e.target.result;  
  19.             };  
  20.         })(img);  
  21.         reader.readAsDataURL(file);  
  22.     }  
  23. }  



 

 

同后端的交互

在一般的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>  



 

 

 

参考

 

 

  • W3C File API
  • MDC File

 

 

 

浏览器支持

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

 

 

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

HTML5 之文件操作(file)


联系
我们