處理AJAX文件上傳服務器端與金字塔

Question

我有這個代碼的Ajax文件上傳：

$('#photo-input:file').change(function() { 
       var photo = this.files[0]; 
       var caption = $('.photo-caption').val(); 
       type = photo.type; 
       if (photo.type != 'image/png' && photo.type != 'image/jpg' && !photo.type != 'image/gif' && photo.type != 'image/jpeg') { 
        alert('Sorry, you may only upload png, jpg, jpeg, or gif images.'); 
        return false; 
       } 

       $('.photo-post-submit').click(function() { 
        var formData = new FormData(); 
        formData.append('photo', photo); 
        $.ajax({ 
         url: '/post', 
         type: 'POST', 
         data: {'photo' : formData, 'caption' : caption}, 
         cache: false, 
         contentType: false, 
         processData: false, 
         success: function() { 
         } 
        }, 'json'); 
       }); 

      }); 

但是，當我打電話request.POST['caption']或request.POST['photo']我得到的錯誤：

Not an HTML form submission (Content-Type: application/xml) 

什麼錯？

Answer 1

它看起來好像你得到了$.post和$.ajax方法之間的困惑，因爲你是在一個單獨的json參數傳遞（這$.ajax不接受作爲一個數據類型參數）。

而且，你真的不應該設置contentType到false，和要設置processData到false，使一個非常混亂的組合，以什麼金字塔將有什麼jQuery讓該組合做。

張貼到服務器與cache參數設置爲false，使用：

$.ajax({ 
    url: '/post', 
    type: 'POST', 
    data: {'photo' : formData, 'caption' : caption}, 
    cache: false, 
    dataType: 'json', 
    success: function() { 
    } 
}); 

注意，dataType設置爲json，這意味着你的金字塔視圖需要回報 JSON，jQuery的AJAX代碼期待JSON響應。

Answer 2

對於文件上傳使用JQuery .upload插件。 有關更多詳細信息，請檢查https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin。