2016-04-08 20 views
0

私は写真をアップロードして<img>に表示するためにフォームを使用しています。
しかし、正しく動作せず、<img>に写真を表示できません。
私はジャンゴを使用していると私はテンプレートとしてbase.htmlを持っていると私はで頭にこのJavaScriptを追加しました:写真をアップロードし、javascriptでdjangoでプレビューを表示

<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> 

答えて

1

はこのように、あなたのform要素にオプションenctype="multipart/form-data"を追加します。

<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/

関連する問題