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，因为该代码正在使用它。

秒，您需要确保将事件实际绑定到元素，因此您需要等待它在那里。您可以通过将脚本放在元素后面或将其称为文档就绪，或者在窗口加载时调用它来实现。

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>

使用javascript上传和预览图片

1 个答案: