javascript - 使用 javascript 上传和预览图像

Question

我正在尝试上传照片并在 <img> 中显示但它不起作用。我正在使用 Python 和 Django 框架，并根据用户需要自动生成表单。我的javascript代码来自Here

这是我的代码、javascript 和 html:

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

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

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

$("#photoinput").change(function(){
    readURL(this);
});

<form id="form1" runat="server">
  <div name="imageholder" class="row tm-image-holder">
      <div class="col-md-12" style="text-align: center">
          <img id="myimg" src="#" style="height: 200px;text-align: center;">
      </div>
  </div>
  <input id="photoinput" type="file" name="photo" href="#"
     class="btn btn-block btn-lg btn-primary inout-margin mybut">
  <input id="name" name="name0" type="text" class="add-input input-margin"
         placeholder="Name, Mohammad, ... *">
  <input id="job" name="job0" type="text" class="add-input"
         placeholder="Job, Developer, Designer, ... *">
  <textarea id="explain" name="explain0" class="add-textarea input-margin" rows="4"
            placeholder="Explain this member in 2 to 4 lines *"></textarea>

</form>

Answer 1

首先，您需要确保页面上引用了 jQuery，因为该代码正在使用它。

您需要几秒钟来确保您确实将事件绑定(bind)到元素，因此您需要等待它出现。您可以通过将脚本放置在元素后面或将其称为“文档就绪”或在窗口加载时调用它来实现此目的。

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

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

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

$(function () { //document ready call
    $("#photoinput").change(function(){
        readURL(this);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <div name="imageholder" class="row tm-image-holder">
      <div class="col-md-12" style="text-align: center">
          <img id="myimg" src="#" style="height: 200px;text-align: center;">
      </div>
  </div>
  <input id="photoinput" type="file" name="photo" href="#"
     class="btn btn-block btn-lg btn-primary inout-margin mybut">
  <input id="name" name="name0" type="text" class="add-input input-margin"
         placeholder="Name, Mohammad, ... *">
  <input id="job" name="job0" type="text" class="add-input"
         placeholder="Job, Developer, Designer, ... *">
  <textarea id="explain" name="explain0" class="add-textarea input-margin" rows="4"
            placeholder="Explain this member in 2 to 4 lines *"></textarea>

</form>