如何在 HTML 中上传之前预览图像？答案

【问题标题】：How to preview image before upload in HTML?如何在 HTML 中上传之前预览图像？
【发布时间】：2014-07-05 11:41:14
【问题描述】：

我修改了函数

<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}
$("#upload").change(function() {
    readURL(this);
});
</script>

并将此输入包含在我的表单中的 body 元素中：

<input type="file" name="uploaded_files" id="upload"/>
<img id="blah" src="#" alt="your image" />

我还包含了 jQuery：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

它在 JsFiddle 中工作，但它不在我的本地主机上工作。

【问题讨论】：

stackoverflow.com/questions/18694437/…

标签： javascript upload preview

【解决方案1】：

你所做的绝对没有错，你的脚本 JS 块也没有。你可以去看看这个JSFiddle。

只要确保您正确加载 jQuery 库，因为您的脚本依赖于。

【讨论】：

【解决方案2】：

试试喜欢

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

Demo

【讨论】：