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

通过ajax whit django

1 个答案: