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

I want to display image on select input file

本文关键字：显示 显示图 图像 文件 输入 选择      更新时间：2023-09-26

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

试试这个：

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);
});
相关文章：