Carga de imágenes usando JQuery y Django

Question

Antes de seguir leyendo, créame cuando digo que he leído todas las otras publicaciones sobre este tema, y ​​ninguna de ellas me ayudó.

Estoy intentando agregar funcionalidad de carga de imágenes a mi sitio web. Quiero subir la imagen a través de una publicación de Ajax. No puedo hacer que esto funcione.

Aquí es lo que tengo:

HTML - Tengo una configuración especial para que se muestre una imagen en lugar de un botón estúpida y el campo de texto. También estoy usando el evento onChange para enviar automáticamente cuando pulso "OK" después de seleccionar la imagen.

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

Finalmente, mi vista de Django que se golpeó al contabilizar en/api/upload_image/

def ajax_upload(request): 

    print request.POST 
    print request.FILES 

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

He tratado de escribir la imagen binaria, pero No puedo abrir esa información que ha escrito. ¿Por qué es tan difícil cargar una imagen usando javascript? Soy un idiota y simplemente no estoy usando una solución simple? Si es así, dígame cuál es la mejor manera de usar jQuery para cargar una imagen en Django.

Answer 1

Pruebe los plugins jQuery Uploadify o SWFUpload. Alguien incluso hizo la integración de Django para usted, vea: https://github.com/tstone/django-uploadify y http://blog.fogtunes.com/2009/11/howto-integrate-swfupload-with-django/.

Answer 2

No estoy tan familiarizado con django, pero creo que el problema es que subir un archivo a través de AJAX no es tan simple como podría pensar.

Existen varios métodos para evitar esto, pero recomiendo usar uno que ya exista. Dado que está utilizando jQuery, recomiendo el plugin de jQuery formas: http://jquery.malsup.com/form/#getting-started

El plugin es compatible con la carga de archivos fuera de la caja, y realmente todo lo que necesita hacer es que el alambre hasta su formulario:

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

ver también: How can I upload files asynchronously?