【html5中input框读取文本框】HTML5中input框读取文本文件内容的例子

时间:2020-08-25  来源:html5教程  阅读:

使用 type 属性为 file 的 元素,就能得到一个标准的上传文件框。除了能在

元素中将文件发送给Web服务器外,这个也有自己处理文件的方式。

在HTML5中,大幅度地增加与改良了input属性的种类,可以简单的使用这些属性来实现之前需要使用JavaScript才能实现的。对于html5中新增的input属性支持得最多、最全面的是Opera浏览器

1. type属性

html5中input的type属性增的可取值新增几种,对于不支持这几种新增值的浏览器会统一解析为text类型

1,选择文件后,我们可以获取其中的文件对象属性

每个文件对象都有三个有用的属性:
   name:保存文件名(不包含路径)
   size:文件的字节大小
   type:保存文件的MIME类型
可以分别读取这三个属性,然后加入判断。比如拒绝处理超过一定大小的文件,或者只允许某种类型的文件。

2,创建FileReader对象,处理文件

通过调用 FileReader 的方法可以提取文件内容。其提供的方法有:
   readAsText():把文件内容转换成一个长字符串,这个方法只能处理包含文本内容(而不是二进制内容)的文件。(像txt、html、xml、csv等格式文件都可以)
   readAsBinaryString():让应用处理二进制编码的数据,但基本上就是把数据保存到一个文本字符串中,效率不高。
   readAsArrayBuffer():将数据读到一个数组中,每个数组项代表一个字节。其优势是可以用来创建Blob对象,然后切分成更小的二进制数据块,以便逐块处理。
   readAsDataURL():能让我们方便地取得图片数据。

3,读取文件数据以及相关属性样例





 
  Read Text
 
  <script>
    function processFiles(files) {
      var file = files[0];
 
      var message = document.getElementById("message");
      message.innerHTML = "文件名:" + file.name + "
";
      message.innerHTML += "文件大小:" + file.size + "字节
";
      message.innerHTML += "文件类型:" + file.type + "
";
      
      var reader = new FileReader();
      reader.onload = function (e) {
        // 这个事件发生,意为着数据准备好了
        // 把它复制到页面的元素中
        var output = document.getElementById("fileOutput"); 
        output.textContent = e.target.result;
      };
      reader.readAsText(file);
    }
  </script>


 
 
 

 

【html5中input框读取文本框】HTML5中input框读取文本文件内容的例子

http://m.bbyears.com/wangyezhizuo/94569.html

推荐访问:
相关阅读 猜你喜欢
本类排行 本类最新