画像ファイルをajax whit django経由でアップロードします

Question

私のサーバーに画像ファイルをアップロードしようとしています。私はAJAX経由でPOST経由で送信しています。私が提出したときにでも、私のフォームは有効ではありません、私に次の検証エラーが得られます。

<Ul class = "errorlist"> <li> photo <ul class = "errorlist"> <li> This field is mandatory </ li> </ li> 

が、イムは、画像ファイルを選択します。

テンプレート

<div class="row"> 
    <div class="col-md-12"> 
    <fieldset> 
    <legend>Agregar Foto</legend> 
    <form id="save-form" action="{% url 'cargar_fotos' id %}" method="POST" runat="server" enctype="multipart/form-data">{% csrf_token %} 
     <div class="row"> 
     <div class="col-md-6"> 
      <div class="row"> 
      <div class="col-md-12"> 
       <label for="">Tipo Foto</label> 
      </div> 
      </div> 
      <div class="row"> 
      <div class="col-md-12"> 
       {{form.tipo_foto}} 
      </div> 
      </div> 
      <div class="row"> 
      <div class="col-md-12"> 
       {{form.foto}} 
      </div> 
      </div> 
     </div> 
     <div class="col-md-6 well"> 
      <img id="foto-preview" src="#" alt="" style="display:none"/> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-md-12"> 
      <button type="submit" class="btn btn-large btn-success pull-right" id="save"> <i class="glyphicon glyphicon-save"></i> Guardar <img src="/static/imagenes/preventivos/loading.gif" style="display:none" id="loading" /></button> 
     </div> 
     </div> 
    </form> 
    </fieldset> 
    </div> 
</div> 

AJAX

$("#save-form").submit(function(event){ 
    event.preventDefault(); 
    $("#save").prop('disabled',true); 
    $("#loading").show(); 
    var form = $("#save-form"); 
    var data = form.get(0); 
    $.ajax({ 
     type: form.attr('method'), 
     url: form.attr('action'), 
     data: form.serialize(), /*data, 
     cache:false, 
     processData: false, 
     contentType: false,*/ 
     success: function(data){ 
     $("#save").prop('disabled', false); 
     $("#loading").hide(); 
     $("#dialog").empty().html(data); 
     }, 
     error: function(jqXHR, textStatus,msg){ 
     $("#btnSearch").prop('disabled', false); 
     $("#loading").hide(); 
     $("#dialog-confirm").dialog({ 
      closeOnEscape: false, 
      open: function(event, ui) { 
       $(".ui-dialog-titlebar-close", ui.dialog | ui).hide(); 
      }, 
      resizable: false, 
      height: "auto", 
      width: 400, 
      modal: true, 
      buttons: { 
      Cerrar: function() { 
       $(this).dialog("close"); 

      } 
      } 
     }).empty().append("<center><p>No se pudo guardar. Verifique los datos ingresados, haga una nueva verificacion de la persona a cargar y vuelva a intentarlo. Si el error persiste, pongase en contacto con la División Desarrollo.</p></center>"); 
     } 
    }); 
    }); 

モデル

class FotosPersona(models.Model): 
    persona  = models.ForeignKey(Personas,related_name='fotos_persona') 
    tipo_foto  = models.CharField(max_length=25) 
    foto   = models.ImageField(upload_to=upload_name) 
    fecha   = models.DateField(auto_now=True) 

    class Meta: 
     db_table = 'fotos_persona' 

形態

class FotosPersonaForm(forms.ModelForm): 
    tipo_foto = forms.ChoiceField(choices=TIPO_FOTOS_CHOICES) 
    foto  = forms.ImageField() 
    class Meta: 
     model = FotosPersona 
     exclude = 'persona' 

ビュー

def cargar_fotos(request,id): 
    persona = Personas.objects.get(id=id) 

    if request.method=="POST": 

     form = FotosPersonaForm(request.POST, request.FILES) 
     print form.errors 
     if form.is_valid(): 
      foto = FotosPersona() 
      foto.persona = persona 
      foto.tipo_foto = form.cleaned_data['tipo_foto'] 
      foto.foto = form.cleaned_data['foto'] 
      try: 
       foto.save() 
      except Exception as e: 
       print e 
       return HttpResponseBadRequest() 
    fotos = FotosPersona.objects.filter(persona = persona) 
    form = FotosPersonaForm() 
    return render_to_response("./fotos.html",{'fotos':fotos,'form':form,'id':id},context_instance=RequestContext(request)) 

Answer 1

私はその問題をこのように解決：

私が提出したとき、私はいるFormDataオブジェクトのインスタンスを作成します。

$("#save-form").submit(function(event){ 
    event.preventDefault(); 
    $("#save").prop('disabled',true); 
    $("#loading").show(); 
    var form = $("#save-form"); 
    var data = new FormData(form.get(0)); //FormData object 
    $.ajax({ 
     type: form.attr('method'), 
     url: form.attr('action'), 
     data: data, 
     cache:false, 
     processData: false, 
     contentType: false, 
     success: function(data){ 
     $("#save").prop('disabled', false); 
     $("#loading").hide(); 
     $("#dialog").empty().html(data); 
     }, 
     error: function(jqXHR, textStatus,msg){ 
     $("#btnSearch").prop('disabled', false); 
     $("#loading").hide(); 
     $("#dialog-confirm").dialog({ 
      closeOnEscape: false, 
      open: function(event, ui) { 
       $(".ui-dialog-titlebar-close", ui.dialog | ui).hide(); 
      }, 
      resizable: false, 
      height: "auto", 
      width: 400, 
      modal: true, 
      buttons: { 
      Cerrar: function() { 
       $(this).dialog("close"); 

      } 
      } 
     }).empty().append("<center><p>No se pudo guardar. Verifique los datos ingresados, haga una nueva verificacion de la persona a cargar y vuelva a intentarlo. Si el error persiste, pongase en contacto con la División Desarrollo.</p></center>"); 
     } 
    }); 
    });