Javascript 如何在HTML中上载之前预览图像？

我已经修改了函数

<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>

函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#blah'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}
$（“#上传”）.change（函数（）{
readURL（this）；
});

并将此输入包含在我的表单的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>

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

试试看

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

---

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

---

只需确保正确加载

jQuery

库，因为脚本依赖于