Загрузить файл изображения через ajax whit django

Question

Загрузить файл изображения через ajax whit django

0

Я пытаюсь загрузить файл изображения на свой сервер. Я отправляю его через AJAX и через POST. Но когда я отправляю, моя форма недействительна и дает мне следующую ошибку проверки:

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

но im выбор файла изображения.

шаблон

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

jaime 30 янв. 2017, в 17:12

Источник

Теги:

django

ajax

1 ответ

Ещё вопросы

jaime · Answer 1 · 2017-01-31T12-56-00.000Z

Я решил эту проблему следующим образом:

Когда я отправляю, я создаю экземпляр объекта 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>");
      }
    });
  });