使用 javascript 在 django 中上传照片并显示预览答案

【问题标题】：Photo upload and show preview in django with javascript使用 javascript 在 django 中上传照片并显示预览
【发布时间】：2016-07-29 10:20:33
【问题描述】：

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

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

而且来自用户正在根据他们的需要生成

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>

【问题讨论】：

标签： javascript django image-uploading

【解决方案1】：

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

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

正如 Django 文档所说：

请注意，request.FILES 仅在请求方法为 POST 且发布请求的具有 enctype="multipart/form-data" 属性的情况下才会包含数据。否则，request.FILES 将为空。

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

【讨论】：