Tải lên hình ảnh bằng cách sử dụng JQuery và Django

Question

Trước khi bạn tiếp tục đọc, hãy tin tưởng tôi khi tôi nói tôi đã đọc tất cả các bài đăng khác về chủ đề này và không ai trong số họ đã trợ giúp.

Tôi đang cố thêm chức năng tải hình ảnh lên trang web của mình. Tôi muốn tải lên hình ảnh qua bài đăng ajax. Tôi không thể làm việc này.

Dưới đây là những gì tôi có:

HTML - i có thiết lập đặc biệt để một hình ảnh được hiển thị thay vì nút ngu ngốc và trường văn bản. Tôi cũng đang sử dụng sự kiện onChange để tự động gửi khi tôi đã nhấn "OK" sau khi chọn hình ảnh.

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

Cuối cùng xem django của tôi đó là nhấn khi bạn đăng lên/api/upload_image/

def ajax_upload(request): 

    print request.POST 
    print request.FILES 

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

Tôi đã cố gắng để ghi ảnh nhị phân, nhưng Tôi không thể mở dữ liệu đã viết. Tại sao tải lên hình ảnh bằng javascript quá khó? Tôi là một thằng ngốc và chỉ không sử dụng một giải pháp đơn giản? Nếu vậy, xin vui lòng cho tôi biết cách tốt nhất để sử dụng jQuery để tải lên một hình ảnh trong Django là gì.

Answer 1

Hãy thử các plugin jQuery Uploadify hoặc SWFUpload. Thậm chí có người đã tích hợp Django cho bạn, xem: https://github.com/tstone/django-uploadify và http://blog.fogtunes.com/2009/11/howto-integrate-swfupload-with-django/.

Answer 2

Tôi không quen với django nhưng tôi nghĩ vấn đề là tải lên tệp qua AJAX không đơn giản như bạn nghĩ.

Có một số phương pháp để giải quyết vấn đề này, nhưng tôi khuyên bạn nên sử dụng phương pháp đã tồn tại. Vì bạn đang sử dụng jquery, tôi muốn giới thiệu các hình thức jquery plugin: http://jquery.malsup.com/form/#getting-started

Plugin hỗ trợ tập tin tải lên ra khỏi hộp, và thực sự tất cả các bạn sẽ cần phải làm là dây nó lên để hình của bạn:

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

also see: How can I upload files asynchronously?