js控制图片文件回显

最新推荐文章于 2025-03-28 14:52:56 发布

探索家

最新推荐文章于 2025-03-28 14:52:56 发布

阅读量1k

点赞数

分类专栏：前端那些事文章标签： html5 javascript jquery 文件上传

本文链接：https://blog.youkuaiyun.com/qq_39852560/article/details/105340424

版权

前端那些事专栏收录该内容

7 篇文章

订阅专栏

在前端开发中，我们经常会遇到图片上传这个问题，那用户点击选择图片之后怎么在页面上显示出来呢。看以下代码：

<input id = "upload" type = "file" />
<img id = "uploadimg" src="" />

$("#upload").on('change',function(){
    fileList = [];
    //原生的文件对象，相当于$file.get(0).files[0];
    curFile = this.files;
    //将FileList对象变成数组
    fileList = fileList.concat(Array.from(curFile));
    for(var i=0,len = curFile.length;i < len;i++){
        reviewFile(curFile[i], $("#uploadimg"));
    }
});


function reviewFile(file, img){
    //实例化fileReader
    let  fd = new FileReader();
    //获取当前选择文件的类型
    let fileType = file.type;
    //调它的readAsDataURL并把原生File对象传给它，
    fd.readAsDataURL(file);//base64
    //监听它的onload事件，load完读取的结果就在它的result属性里了
	
    fd.onload = function(){
        img.attr("src", this.result);
    }
 }

具体还有什么业务逻辑具体修改