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

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