使用 javascript 在 Django 中上传照片并显示预览

Question

我正在使用表格上传照片并显示在<img>。
但它无法正常工作，无法在 <img>.
上显示照片我正在使用 Django，我有一个 base.html 作为模板，我通过以下方式将此 javascript 添加到头部：

<script src="{% static "landingpages/js/photoupload.js" %}"></script>

并且用户根据需要生成 from

Javascript

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

HTML

<section class="container" xmlns="http://www.w3.org/1999/html">
  <div class="row addform" id="addform">
    <div class="col-md-12 addform-col">
      <div id="headertag" class="row" style="margin-left: 0px">
        <label class="add-lable">Team Member(s):
          <span style="color:red">*</span>
        </label>
      </div>
      <div class="row input-field">
        <form id="form1" runat="server">
          <div name="membercard" class="row">
            <div id="teamform" class="col-md-4" style="display: none">
              <div name="imageholder" class="row tm-image-holder">
                <div class="col-md-12" style="text-align: center">
                  <img id="myimg" style="height: 200px;text-align: center;">
                </div>
               </div>
               <input id="photoinput" type="file" 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>
              </div>
              <span id="formhere"></span>
             </div>
            </form>
            <div name="addform" class="row input-field">
              <div class="col-md-12" style="text-align: left">
                <a onclick="member_card()">+ Add Team Member</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

Answer 1

将选项 enctype="multipart/form-data" 添加到您的 form 元素，如下所示：

<form id="form1" enctype="multipart/form-data runat="server">

正如 Django 文档所说：

Note that request.FILES will only contain data if the request method was POST and the that posted the request has the attribute enctype="multipart/form-data". Otherwise, request.FILES will be empty.

https://docs.djangoproject.com/en/1.9/topics/http/file-uploads/

使用 javascript 在 Django 中上传照片并显示预览

Photo upload and show preview in django with javascript

javascript

django

image-uploading