Question

基本上我有一个表格，里面有一个带文件输入的图像框，现在我需要显示从文件输入中选择的图片并将其显示在我的图片框中，而不提交表格。

我找到了一个教程：

<!DOCTYPE html>
<html>
    <head>
    <script>
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

       function readURL(input) {
            if (input.files && input.files[0]) {
                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#imgInp").change(function(){
            readURL(this);
                alert(input.val());
        });
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <img id="blah" src="#" alt="your image" />
    </form>

    </body>
</html>

但这不会在我的图片框中显示选择图片。

Answer 1

尝试此示例js

＆＃13;

source myScript.sh

＆＃13;

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

＆＃13;

Answer 2

问题中的

javascript似乎会返回预期结果。问题是放置<script>元素或不使用.ready()。此外，input事件中未定义change。您可以将this.value替换为input.val()事件处理程序中的change作为alert()调用的参数。

将<script>元素放置在<form>元素下面的html

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>

</head>

<body>
  <form id="form1" runat="server">
    <input type="file" id="imgInp" />
    <img id="blah" src="#" alt="your image" />
  </form>
  <script>
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

    function readURL(input) {
      if (input.files && input.files[0]) {
        reader.readAsDataURL(input.files[0]);
      }
    }

    $("#imgInp").change(function() {
      readURL(this);
      alert(this.value);
    });
  </script>
</body>

</html>

使用.ready() <script>元素作为<head>元素的子元素

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <script>
    $().ready(function() {
      var reader = new FileReader();
      reader.onload = function(e) {
        $('#blah').attr('src', e.target.result);
      }

      function readURL(input) {
        if (input.files && input.files[0]) {
          reader.readAsDataURL(input.files[0]);
        }
      }

      $("#imgInp").change(function() {
        readURL(this);
        alert(this.value);
      });
    })
  </script>
</head>

<body>
  <form id="form1" runat="server">
    <input type="file" id="imgInp" />
    <img id="blah" src="#" alt="your image" />
  </form>

</body>

</html>

如何在提交表单之前加载图片

2 个答案: