2011-08-31 100 views
8

在繼續閱讀之前,請相信我,當我說我已閱讀關於此主題的所有其他帖子時,他們都沒有幫助。使用JQuery和Django上傳圖片

我想添加圖像上傳功能到我的網站。我想通過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這麼難的圖像?我是一個白癡,只是沒有使用簡單的解決方案?如果是這樣,請告訴我在Django中使用jQuery上傳圖片的最佳方式是什麼。

+0

你卡在哪裏?你的HTML/JS工作正常嗎?或者你有問題嗎? – bcoughlan

+0

你能以這種方式發佈任何文件到服務器嗎?我不認爲文件可能會被服務器ajax化。 –

回答

2

我對django並不熟悉,但我認爲問題在於通過AJAX上傳文件並不像您想象的那麼簡單。

有幾種方法可以解決這個問題,但我建議使用一個已經存在的方法。由於您使用jQuery的,我會推薦的jQuery插件形式:http://jquery.malsup.com/form/#getting-started

插件支持文件上傳開箱即用,真正所有你需要做的是線它到您的窗體:

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

還看到:How can I upload files asynchronously?

+0

讓我試試這個,讓你知道。謝謝 – josephmisiti