html file控件选择文件后立即预览 js实现

Posted Bodi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html file控件选择文件后立即预览 js实现相关的知识,希望对你有一定的参考价值。

//上传图片后立即预览 file对象,图片容器id
function showImg(fileObj,imgId) {
 
    var file=fileObj.files[0];
           var r = new FileReader();
                r.readAsDataURL(file);
                $(r).load(function() {
                    $(‘#‘+imgId).attr("src", this.result);
            })                   
     
}

<input type="file" onchange="showImg(this,‘img‘)"   accept="image/gif"  />

通过accept限制文件类型 通过file.size验证文件大小 file.szie是以字节为单位

以上是关于html file控件选择文件后立即预览 js实现的主要内容,如果未能解决你的问题,请参考以下文章

vue使用readAsDataURL实现选择图片文件后预览

file控件change事件触发问题

Input File选择图片后,未保存预览

原生JS实现异步图片上传(预览)

input实现多文件上传及图片预览

选择文件后如何显示文件预览?