JavaScript的FileList File FileReader对象

针对于文件上传域的file操作的总结:

1.通过files属性可以访问<input id="XX" type="files".../>的所有选中的文件,document.getElemnetById("XX").files,通过files属性获得的是一个FileList对象数组,他的每个元素都是File对象,可以通过(name size type等属性)对每个元素的访问。


<body>
浏览图片:<input type="file" id="images" multiple="multiple" accept="image/jpg" />//accept是过滤文件类型为图片类
<input type="button" value="显示内容" onclick="showDetail()" />
<script type="text/javascript">
  var showDetail=function(){
      var img=document.getElementById("images");
      var fileList=img.files;//通过files属性获得元素img上传域的所有文件
      for(var i=0;i<fileList.length;i++)
      {
          var file=fileList[i];
          div=document.createElement("div");
          
          document.body.innerHTML="第"+(i+1)+"个文件的文件名是:"+file.name+",该文件类型是:"+file.type+",该文件大小是:"+file.size;
          document.body.appendChild(div);

     }   

} </script>

</body>

2.FileReader对象:一般用FileReader对象来读取文件内容,有readAsText(file,encoding)(读取文本),readAsBinaryString(file)(读取二进制),readAsDataURL(file)(以dataurl的方式读取)方法,FileReader的result属性返回结果。

浏览文件:<input id="file1" type="file" /><br />
<div id="result"></div>
<input type="button" value="读取文本文件" onclick="readText();"/><br />
<input type="button"  value="读取二进制文件" onclick="readBinary();"/><br />
<input type="button"  value="读取文本路径" onclick="readURL();"/><br />


<script type="text/javascript">
  var reader=null;
  if(FileReader)//创建对象
  {reader=new FileReader();}
  else
  {alert("浏览器不支持FileReader");}
 
 
  var readText=function(){//读取文本文件的方法
      if(/text\/\w+/.test(document.getElementById("file1").files[0].type))
      {//读取所选中的第一个文件,有两个参数,第一个参数为该文件,第二个参数为以什么方式
          reader.readAsText(document.getElementById("file1").files[0],"gbk");
          reader.onload=function(){//加载方法
              document.getElementById("result").innerHTML=reader.result;//通过filereader对象的result属性来获得内容
          };
      }
      else{
          alert("你选的文件不是文本文件");
          }
  }
 
 
  var readBinary=function(){//读取二进制文件的方法
      reader.readAsBinaryString(document.getElementById("file1").files[0]);
      reader.onload=function(){
          document.getElementById("result").innerHTML=reader.result;
      };
  }
 
 
  var readURL=function(){//以数据路径读取文件的方法,只有一个参数(file)
      reader.readAsDataURL(document.getElementById("file1").files[0]);
      reader.onload=function(){
          document.getElementById("result").innerHTML=reader.result;
      };
  }
 </script>


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页