图片上传预览

Posted cenfengtao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片上传预览相关的知识,希望对你有一定的参考价值。

<body>
    <input type="file" id="file" name="" />
    <div id="image" style="width:390px;height:280px; background:#CCCCCC; float:left;">
        <img src="11.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>

以上是关于图片上传预览的主要内容,如果未能解决你的问题,请参考以下文章

9行代码实现图片上传和预览(自定义按钮上传)

图片上传预览

django上传图片并且带有预览功能

上传前多张图片预览

nodejs实现本地上传图片并预览功能

图片上传即时预览效果