思洋互动网站建设学前班

使用Javascript打开客户端文件

现在，我们已经把客户端机器上的文件成功拖拉到浏览器中了，也就是说，我们用新的拖拉的方法，完成了以往要使用传统的文件上传选择框才能完成的工作!接下来，我们尝试通过Javascript，去判断用户上传的文件类型，并学习如何使用Javascript去操作客户端的文件。
广州网站建设,网站建设,广州网页设计,广州网站设计

首先，为什么要通过Javascript去分析操作客户端的文件呢?假如要求用户上传很多文件，或者上传指定格式的图片，假如用户选好上传文件到服务端后，服务端才判断发现文件不符合要求，再要求用户重新上传的话，给用户的体验则不大友好，所以，希望能在用户在客户端选择完文件后就马上能判断出文件的大小和类型，如果是图片的话，甚至可以实现客户端图片预览的效果。

在HTML5的起草标准中，提供了FileReader接口去处理客户端的文件，有如下几个重要API：

readAsText(File f, [encoding]):将一个文件读入到字符串中去，其中可以选用文件的编码，默认的是UTF-8

.readAsDataURL(File f): 将文件以data URL编码的方式读入文件内容,dat Url方式是一种以BASE64编码在页面中展示文件的方法，详细见：http://en.wikipedia.org/wiki/Data_URI_scheme

.readAsBinaryString(File f): 将文件以二进制方式读取。.readAsArrayBuffer(File f):.将文件作为ArrayBuffer对象的方式读取。ArrayBuffer详见http://www.khronos.org/registry/typedarray/specs/latest/

接下来，我们看下如何在Javascript中异步打开读取文件。

Javascript中异步打开文件

先来复习下之前我们用到的parseFile方法，代码如下：

1. function ParseFile(file) {  
2. Output(  
3. "  
4. File information: " + file.name +  
5. " type: " + file.type +  
6. " size: " + file.size +  
7. " bytes  
8. "  
9. );  
10. } 

这里只是简单显示了文件的文件名和文件大小，而接下来我们要判断是这个文件是否属于文件类型的文件(即text/plain,text/html,text/css等)，可以使用FileReader.readAsText()方法读取并且去掉其中的<,>符号，代码如下;

1. if (file.type.indexOf("text") == 0) {  
2. var reader = new FileReader();  
3. reader.onload = function(e) {  
4. Output(  
5. "  
6. " + file.name + ":  
7. " +  
8. e.target.result.replace(//g, ">") +  
9. "  
10. "  
11. );  
12. }  
13. reader.readAsText(file);  
14. } 

同样，我们希望将一张图片从用户的资源管理器中，拖拉到页面的放置区域后，能马上显示这张图片的实际内容以及大小，可以用如下代码实现：

1. 0.// display an image   
2. 0.if (file.type.indexOf("image") == 0) {   
3. 0. var reader = new FileReader();   
4. 0. reader.onload = function(e) {   
5. 0. Output(   
6. 0. "<p><strong>" + file.name + ":</strong><br />" +   
7. 0. '<img src="' + e.target.result + '" /></p>'   
8. 0. );   
9. 0. }   
10. 0. reader.readAsDataURL(file);   
11. 0.}  

这里，直接将图片的内容以FileReader的readAsDataURL方法读取入并显示。
广州网站建设,网站建设,广州网页设计,广州网站设计

最后，我们可以通过http://blogs.sitepointstatic.com/examples/tech/filedrag/2/index.html观看我们的

DEMO演示，请读者尝试从自己电脑上的windows资源管理器中，拖放图片或其他类型文

件到页面的指定区域中，则会发现浏览器能自动识别用户拖放的文件，当然，请使用Chrome

或Firefox浏览器才能看到效果。

小结

在本文中，为读者介绍了HTML5中新的文件处理API，利用文件处理API，可以实现让浏览器识别从用户端拖放到页面的文件，在下一讲中，将重点介绍如何上传这些已经拖放了的文件。

原文：http://tech.it168.com/a2011/1207/1285/000001285230.shtml