预览input上传的图片

最新推荐文章于 2021-06-11 23:32:33 发布

置顶凌晨i

最新推荐文章于 2021-06-11 23:32:33 发布

阅读量314

点赞数 1

分类专栏：问题汇总

本文链接：https://blog.csdn.net/u010042858/article/details/78287314

版权

问题汇总专栏收录该内容

3 篇文章 0 订阅

订阅专栏

通过input来上传图片并将图片显示出来
注意：终极解决方案在最后面

<input id="imgPicker" type="file" />
<img id="preview" />

方法一

监听input标签的change事件，用来观察用户是否选中了图片

document
    .querySelector('#imgPicker')
    .addEventListener('change', function(){
        //当没选中图片时，清除预览
        if(this.files.length === 0){
            document.querySelector('#preview').src = '';
            return;
        }

        //实例化一个FileReader
        var reader = new FileReader();

        reader.onload = function (e) {
            //当reader加载时，把图片的内容赋值给
            document.querySelector('#preview').src = e.target.result;
        };

    //读取选中的图片，并转换成dataURL格式
    reader.readAsDataURL(this.files[0]);
    }, false);

优化

使用HTML5的FileReader来读取图片，将读取结果直接替换到img的src属性上即可。

要先设置回调再读取文件。

input.onchange = function () {
    var imgFile = input.files[0];
    var fr = new FileReader();

    fr.onload = function () {
        img.src = fr.result;
    };
    // 注意要先设置回调再读取文件
    fr.readAsDaraURL(imgFile);
};

类似的方法

<body>
    <input type="file" id="file" name="" />
    <div id="image" style="width:390px;height:280px; background:#CCCCCC; float:left;">
        <img src="__PUBLIC__/images/tu.png" />
    </div>
</body>
<script>
document.getElementById('file').onchange = function() {
    var imgFile = this.files[0];
    var fr = new FileReader();
    fr.onload = function() {
        document.getElementById('image').getElementsByTagName('img')[0].src = fr.result;
    };
    fr.readAsDataURL(imgFile);
};
</script>

</html>

最简单好用的终极方案

window.URL.createObjectURL 这个函数会创建一个临时的地址，把地址设置到src上就行了。

//这里传一个文件对象 例如：file.files[0]
var src=window.URL.createObjectURL(blob);
img.src=src;

例子

//通过onchange事件监听，通过this去获取上传的文件对象
<input id="imgPicker" type="file" onchange="showImage(this)"/>
<img id="preview" wdith="100px" height="100px"/>

function showImage(file){
  var src = window.URL.createObjectURL(file.files[0]);
  $("#preview").attr('src',src);
}