首页 > Web开发 > 详细

HTML5 读取上传文件(转载)

时间:2019-02-02 10:51:36      阅读:167      评论:0      收藏:0      [点我收藏+]

另参考 http://www.jianshu.com/p/46e6e03a0d53

 

1 filelist对象与file对象:

<input type="file" id="file" multiple>     //multiple可上传多个文件
<input type="button" onclick="showFileName()" value="文件上传">
<script>
function showFileName(){
      var file;       //创建file对象
      for(var i;i<document.getElementById("file").files.length;i++){
          file = document.getElementById(file).files[i];   //.files
          console.log(file.name);
       }
}
</script>

 

2 Blob对象:表示原始的二进制数据,file继承自blob。

  • 其属性1:size 表示文件大小 
  • 属性2:type 表示文件类型  如image/png
var file;
file = document.getElementById("file").files[0];
file.size;     //当前上传文件的大小
file.type;  

 

3 Filereader对象
包含5个对象:

  • readAsBinaryString    将文件数据读取为二进制数据字符串
  • readAsText   将文件数据读取为文本数据
  • readAsDataURL   图像路径
  • readArrayBuffer  
  • abort       中断


6个事件:

  • onabord     
  • onerror   
  • onloadstart    
  • onload     
  • onloadend
  • onprogress 监听进度

 

<input type="file" id="file">
<input type=‘button‘ value=‘读取图像‘ onclick=‘readAsDataURL()‘>
<input type=‘button‘ value=读取二进制’ onclick=‘‘>
<input type=‘button value=‘读取文本文件‘ onclick=‘‘>
<div id=‘result‘ name=‘result>
<script>
var result = document.getElementById(result);
var file = document.getElementById(file);

function readAsDataURL(){
         var  file = document.getElementById(file).files[0];
         var reader  = new FileReader();  //创建filereader对象
         reader.readAsDataURL(file);       //读取图片文件
         reader.onload = function(ofile){
              var resultimg = document.getElementById(result);
              resultimg.innerHTML = <img src="+ofile.target.result+"+>;
         }
}

function readAsText(){
           var file = document.getElementById(file).files[0];
           var reader = new FileReader();
           reader.readAsText(file);   //读取文本内容
           reader.onload = function(e){
                var resulttxt = document.getElementById(result);
                resulttxt.innerHTML = e.target.result;
           }
}
</script>

 

 

原文链接

 

HTML5 读取上传文件(转载)

原文:https://www.cnblogs.com/OpenCoder/p/10347426.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!