Caricamento immagine usando JQuery e Django

Question

Prima di continuare a leggere, fidati di me quando dico di aver letto tutti gli altri post su questo argomento, e nessuno di loro ha aiutato.

Sto tentando di aggiungere funzionalità di caricamento delle immagini al mio sito web. Voglio caricare l'immagine tramite un post ajax. Non riesco a farlo funzionare.

Ecco quello che ho:

HTML - ho una messa a punto speciale in modo che l'immagine viene visualizzata al posto del pulsante stupido e il campo di testo. Sto anche usando l'evento onChange per inviare automaticamente quando ho colpito "OK" dopo aver selezionato l'immagine.

<form id="add-picture-form" method="POST" action="/api/upload_image/" enctype="multipart/form-data">{% csrf_token %} 
    <div class="thumbnails" style="width:400px;"> 
     <label class="cabinet BrandHeader"> 
      <input type="file" class="file" id="upload-photo" onChange="$('#add-picture-form').submit();" /> 
     </label> 
    </div> 
</form> 

Jquery:

$('#add-picture-form').submit(function() { 
    //var filename = $("#upload-photo").val(); 
    var photo = document.getElementById("upload-photo"); 
    var file = photo.files[0]; 

$.ajax({ 
    type: "POST", 
    url: "/api/upload_image/", 
    enctype: 'multipart/form-data', 
    data: {'file': file.getAsBinary(), 'fname' : file.fileName }, 
    success: function(){ 
     alert("Data Uploaded: "); 
    } 
}); 

    return false; 
}); 

Infine mio punto di vista Django che viene colpito quando si posta a/api/upload_image/

def ajax_upload(request): 

    print request.POST 
    print request.FILES 

    return http.HttpResponse(simplejson.dumps([True]), mimetype='application/javascript') 

Ho cercato di scrivere l'immagine binaria, ma Non riesco ad aprire i dati che ho scritto. Perché caricare un'immagine con javascript è così difficile? Sono un idiota e non sto usando una soluzione semplice? Se è così, per favore dimmi qual è il modo migliore per usare jQuery per caricare un'immagine in Django.

Answer 1

provare il plugin jQuery Uploadify o SWFUpload. Qualcuno ha persino fatto l'integrazione con Django per te, vedi: https://github.com/tstone/django-uploadify e http://blog.fogtunes.com/2009/11/howto-integrate-swfupload-with-django/.

Answer 2

Non sono così familiare con Django ma penso che il problema è che caricare un file tramite AJAX non è così semplice come si potrebbe pensare.

Esistono diversi metodi per aggirare questo problema, ma è consigliabile utilizzarne uno già esistente. Dal momento che si sta utilizzando jQuery, mi sento di raccomandare il plugin jQuery forme: http://jquery.malsup.com/form/#getting-started

Il plugin supporta il caricamento di file fuori dalla scatola, e davvero tutto ciò che serve fare è filo fino al modulo:

$('#add-picture-form').ajaxForm(); 

vedi anche: How can I upload files asynchronously?