html file 上传后如何在旁边显示上传的图片

挥手凝淡墨
  • 868
<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>

上传图片后如何实时 预览

javascript
评论
阅读 21k
5 个回答
leftstick
  • 26.8k
✓ 已被采纳

谢邀吧，我尽量把要说的写简单一点：

首先，我假设你有一个标签input用来选择图片，还有一个img标签用来预览，html大致如下：

<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);
评论
SevenOutman
  • 3.1k

使用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);
};

注意要先设置回调再读取文件。重要的事情说两遍。

评论
慕少艾
  • 3.5k

其实楼上已经给出了方案。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<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>
评论
mengdu
  • 2.2k

告诉你个很简单的方法，不需要上传到服务器，直接浏览器选择图片就可以预览，视频也行。
那就是：

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

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

评论
zacks
  • 1.4k

推荐一个：

JS兼容各个浏览器的本地图片上传即时预览效果

不同浏览器对HTML5的支持度不一样，如果需要考虑到向下兼容，可以参考这篇文章
另外还有一种解决方案：即图片上传完成之后，服务器返回上传的图片URL，然后创建img标签即可

评论
撰写回答

登录后参与交流、获取后续更新提醒

宣传栏