JavaScript的FileList File FileReader对象

最新推荐文章于 2024-05-19 18:33:52 发布

@Mr.shi

最新推荐文章于 2024-05-19 18:33:52 发布

阅读量6.8k

点赞数

针对于文件上传域的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="显示内容" οnclick="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="读取文本文件" οnclick="readText();"/><br />
<input type="button" value="读取二进制文件" οnclick="readBinary();"/><br />
<input type="button" value="读取文本路径" οnclick="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.οnlοad=function(){//加载方法
              document.getElementById("result").innerHTML=reader.result;//通过filereader对象的result属性来获得内容
          };
      }
      else{
          alert("你选的文件不是文本文件");
          }
}

var readBinary=function(){//读取二进制文件的方法
      reader.readAsBinaryString(document.getElementById("file1").files[0]);
      reader.οnlοad=function(){
          document.getElementById("result").innerHTML=reader.result;
      };
}

var readURL=function(){//以数据路径读取文件的方法，只有一个参数（file）
      reader.readAsDataURL(document.getElementById("file1").files[0]);
      reader.οnlοad=function(){
          document.getElementById("result").innerHTML=reader.result;
      };
}
</script>

@Mr.shi

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
JavaScript的FileList File FileReader对象

针对于文件上传域的file操作的总结：1.通过files属性可以访问&lt;input id="XX" type="files".../&gt;的所有选中的文件，document.getElemnetById("XX").files,通过files属性获得的是一个FileList对象数组，他的每个元素都是File对象，可以通过(name size type等属性)对每个元素的访问。&lt;body...
复制链接

扫一扫