html操作本地文件,html引入本地js文件

　　在之前的文章中，我给大家分享了几个HTML5的例子，分别是拖拽功能的演示，可编辑页面内容的演示，本地存储功能的演示。今天，我将与您分享一个简单的应用程序来演示如何使用FileReader，这是HTML5中提供的一个文件操作API。

　　当你在看我之前写的HTML5例子时，我想创建一个简单但适用的例子，以一种更新颖的方式实践这些新的HTML 5特性。我的目标并不是简单地展示这些HTML5 APIs，而是用例子告诉开发者如何真正以实用创新的方式实现这些API。

　　在HTML5中，从网页访问本地文件系统非常简单，就是使用文件API。这个文件规范提供了一个API来表示Web应用程序中的文件对象，您可以通过编程来选择它们并访问它们的信息。文件API包括：

　　文件列表序列表示本地系统中选定的单个文件的数组。选择文件的用户界面可以通过调用input type="file "来实现。

　　一个Blob接口，表示原始的二进制数据，通过它可以访问字节数据。

　　文件接口，存储文件的只读属性信息，如文件名、文件类型、文件数据访问地址等。

　　FileReader接口，提供了读取文件的方法和获取文件读取结果的事件模型。

　　FileError接口和FileException对象，用于定义本规范中的错误生成条件。

　　如何使用这个例子：在这个例子中，我给出一个画板。您可以从本地文件系统中拖放图片，也可以使用文件选择框来选择图片。在示例中，请只选择图片文件，我没有添加文件过滤和文件类型检查。记住，没有一个浏览器完全实现了HTML5。这个例子需要运行在支持HTML5的浏览器上，比如Firefox3.5以上。实现File API的主要方法非常的简单，就像下面:按如下方式复制代码：

　　函数图像选择(我的文件){

　　for (var i=0，f；f=my files[I]；i ) {

　　var imageReader=new FileReader()；

　　imagereader . onload=(function(aFile){

　　返回函数(e) {

　　var span=document . createelement( span )；

　　span . innerhtml=[ img class= images src= ，e.target.result， title= ，aFile.name， /]。join(")；

　　document . getelementbyid( thumbs )。insertBefore(span，null)；

　　};

　　})(f)；

　　imagereader . readasdataurl(f)；

　　}

　　}

　　函数dropIt(e) {

　　images selected(e . data transfer . files)；

　　e .停止传播()；

　　e . prevent default()；

　　}

　　我选择将我的ondrop事件放在td上：复制代码代码如下：

　　TD align=" left " height=" 105 " ondragenter=" return false " ondragover=" return false " ondrop=" drop it(event)"

　　输出id=" thumbs "/输出

　　/td

　　在这个例子中，我只是将本地文件拖放到画板中。但是，我认为它可以向您展示File API简单但强大的功能。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。