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

Question

我已经修改了功能

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

，并包含在主体元素在我的形式此输入：

<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 ，但它不在我的本地主机上工作。

Answer 1

是绝对没有错，你做了什么，也没有用你的JS脚本块。你可以去看看这个JSFiddle。

---

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

Answer 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