Загрузка изображения с использованием JQuery и Django

Question

Прежде чем продолжить чтение, поверьте мне, когда я скажу, что прочитал все остальные посты на эту тему, и ни один из них не помог.

Я пытаюсь добавить функцию загрузки изображений на мой сайт. Я хочу загрузить изображение через сообщение ajax. Я не могу заставить это работать.

Вот что у меня есть:

HTML - у меня есть специальная настройка, так что вместо глупой кнопки отображается изображение и текстовое поле. Я также использую событие onChange для автоматической отправки после нажатия кнопки «ОК» после выбора изображения.

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

Наконец, мое представление django, которое появляется при публикации в / api / upload_image /

def ajax_upload( request ):

    print request.POST
    print request.FILES

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

Я пытался записать изображение в двоичный файл, но не могу открыть записанные данные. Почему загрузка изображения с использованием JavaScript так сложна? Я идиот и просто не пользуюсь простым решением? Если да, скажите, пожалуйста, как лучше всего использовать jQuery для загрузки изображения в Django.

Answer 1

Попробуйте подключаемые модули jQuery Uploadify или SWFUpload .Кто-то даже сделал интеграцию Django для вас, см .: https://github.com/tstone/django-uploadify и http://blog.fogtunes.com/2009/11/howto-integrate-swfupload-with-django/.

Answer 2

Я не очень знаком с django, но думаю, что проблема в том, что загрузка файла через AJAX не так проста, как вы думаете.

Есть несколько способов обойти это, но я рекомендую использовать тот, который уже существует. Поскольку вы используете jquery, я бы порекомендовал плагин jquery forms: http://jquery.malsup.com/form/#getting-started

Плагин поддерживает загрузку файлов из коробки, и на самом деле все, что вам нужно сделать, это подключить его к вашей форме:

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

см. Также: Как я могу загружать файлы асинхронно?