input file 图片上传前预览

1.获取到这个File对象之后就可以获取到上传文件的一些属性，比如：lastModified（代表文件的修改日期，而非上传日期）、name、size（单位是b）、type（例如图片就是"image/png"，然后我们可以根据image来判断是否是图片）等。

2.fileReader对象获取文件信息，常用方法及事件。

• readAsDataURL() 方法。//将文件读取为base64的格式，也就是可以当成图片的src
• result 属性 //将读取的数据保存在result里。
• progress 事件 //定时触发，来获取当前已上传文件的大小，如进度条。
• loade 事件 //文件上传完成时触发。
• loadend 事件 //文件上传完成时（不管成功、失败）触发。

3.事例

   1、页面上传，预览。

<form id="test" action="" method="post"  enctype="multipart/form-data">

<img src="" id="image-preview" width="200">
　　<p>
　　　　<input type="file" id="image-file" name="test" οnchange="fileUpload()">
　　</p>
<p id="file-info"></p>
</form>

2、js实现fileUpload()。

<script>

function fileUpload(){
    var
        fileImage = document.getElementById('image-file'),
        info = document.getElementById('file-info');
        debugger;
        // 清除历史图片:
       document.getElementById('image-preview').src = '';
        // 检查文件是否选择:
        if(!fileImage.value) {
            info.innerHTML = '没有选择文件';
            return;
        }
        // 获取File引用:
        var file = fileImage.files[0];
        //判断文件大小
        var size = file.size;
        if(size >= 1*1024*1024){
            alert('文件大于1兆不行!');
            return false;
        }
        // 获取File信息:
        info.innerHTML = '文件: ' + file.name + '<br>' +
            '大小: ' + file.size + '<br>' +
            '修改时间: ' +file.lastModifiedDate.getFullYear()+'年'+ (file.lastModifiedDate.getMonth()+1)+'月'+file.lastModifiedDate.getDay()+'日';
        if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
            return;
        }
        // 读取文件:
        var reader = new FileReader();
        // 以DataURL的形式读取文件:
        reader.readAsDataURL(file);
        reader.onload = function(e) {
            document.getElementById('image-preview').src=this.result;
        };
        console.log(file);
}

</script>

转载于:https://www.cnblogs.com/lxjy201832/p/8649168.html