我想在选择的输入文件上显示图像

Question

我的jQuery代码不起作用。我想在用户选择输入文件时显示图像。请帮忙。

我使用data-val属性来保存ID。这里是我的代码：

</script> 
    <script type="text/javascript"> 
     function readURL(input, id) { 
      if (input.files && input.files[0]) { 
       var reader = new FileReader(); 

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

       reader.readAsDataURL(input.files[0]); 
      } 
     } 
     jQuery(document).on("change", "#imgInp", function(){ 
      var id = jQuery(this).data("val");   
      readURL(this, id); 
     }); 

    </script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form id="form1" runat="server"> 
    <input type='file' data-val="#blash1" id="imgInp" /> 
    <img id="blah1" src="#" alt="your image" /> 
    <br> 
    <input type='file' data-val="#blash2" class="imgInp" /> 
    <img id="blah2" src="" alt="your image" /> 
    <br> 
    <input type='file' data-val="#blash3" class="imgInp" /> 
    <img id="blah3" src="" alt="your image" />       
</form> 

Answer 1

试试这个：

HTML：

<form id="form1" runat="server"> 
    <input type='file' data-val="#blash1" class="imgInp" /> // add class imgInp here 
    <img height="100" id="blah1" src="#" alt="your image" /> 
    <br> 
    <input type='file' data-val="#blash2" class="imgInp" /> 
    <img height="100" id="blah2" src="" alt="your image" /> 
    <br> 
    <input type='file' data-val="#blash3" class="imgInp" /> 
    <img height="100" id="blah3" src="" alt="your image" />       
</form> 

的Jquery：

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

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

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

$(".imgInp").change(function(){ 
    var img_name = $(this).next("img").attr("id"); 
    readURL(this,img_name); 
});