HTML5 文件上传

这篇随笔主要引用https://juejin.im/post/59598ecf5188250d8d141fff，只用于自己学习，不对外宣传。

FileList 对象和 file 对象

input[type="file"]标签有一个multipe属性，允许用户选择多个文件，FileList对象就是表示用户选择的文件列表。这个列表中的每一个文件就是一个file对象。

file对象属性：

name:文件名，不包含路径
type：文件类型。图片类型的文件都会以image/开头，可以由此来限制只允许上传图片
size:文件大小
lastModified:文件最后修改时间

<input type="file"  multipe>
<script>
    var elem = document.getElementById('files');
    elem.onchange = function (event){
        var files = event.target.files;
        for(var i = 0;i<files.length;i++){
            if(files[i].type.indexof('image/')!==-1&&files[i].size<204800){
            console.log(files[i].name);
        }    
    }
}

input 中有个 accept 属性，可以用来规定能够通过文件上传进行提交的文件类型。

<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png">

FileReader 对象

FileReader对象主要用来把文件读入内存，并且读取文件中的数据。通过构造函数创建一个FileReader对象

var reader = new FileReader();

该对象有以下方法：

abort：中断读取操作
readAsArrayBuffer:读取文件内容到ArrayBuffer对象中
readAsBinaryString:将文件读取为二进制数据
readAsDataURL:将文件读取为data:URL格式的字符串
readAsText:将文件读取为文本

<input type="file" >
<img src="blank.gif" >
<script>    
    var elem = document.getElementById('files'),
        img = document.getElementById('preview');
    　　 elem.onchange = function(){
      　　 var files = elem.files,
           reader = new FileReader();
     　　  if(files && files[0]){
        　　reader.onload = function(ev){
          　img.src = ev.target.result;
           }
        reader.readAsDataURL(files[0])
      }
    }
</script>

HTML5 文件上传

FileList 对象和 file 对象

FileReader 对象

相关推荐