JQuery的AJAX不是形式

我用jQuery以下AJAX功能發送文件：JQuery的AJAX不是形式

var formData = $('#FonykerEditForm').serialize();  
$.ajax ({ 
    type: 'POST', 
    url: '<?php echo $html->url('/fonykers/edit',true); ?>', 
    data: formData, 
    dataType: 'json', 
    success: function(response) { 
     message.html(response.msg); 
     message.fadeIn(); 
     if(!response.ok) { 
      message.removeClass('success'); 
      message.addClass('error'); 
     } else { 
      message.removeClass('error'); 
      message.addClass('success'); 
      username = $('#FonykerUsername').val(); 
      email = $('#FonykerEmail').val(); 
     } 

     $('#save-account-button').removeAttr('disabled'); 
     $('.input-text').removeClass('ok'); 
     $('.input-combo').removeClass('ok'); 
    }, 
    error: function (xhr, ajaxOptions, thrownError){ 
     alert(xhr.statusText); 
     alert(thrownError); 
     $('#save-account-button').removeAttr('disabled'); 
    } 
});

我遇到的問題是，在我的形式的文件類型字段沒有得到連同其餘提交表單的數據，如何將文件包含在ajax請求的數據中？

來源

2011-08-23 8vius

文件無法使用AJAX這種方式發送。使用其中的一個jquery插件來做上傳。 – HyderA

如果您真的想通過ajax發送文件，請使用HTML5 –

您可以將表單的目標設置爲隱藏的iFrame，然後監聽隱藏的iframe的加載事件以查看它何時返回。然後，您可以從iframe正文獲取內容作爲響應。 –

就像我在上面的評論中說的，通過ajax發送文件並不簡單。如果你想嘗試它。我見過的一般方法是創建一個新的iframe，爲其添加一個文件輸入字段，選擇您的文件並以編程方式提交。這樣，iframe在後臺進行提交。

看看這個插件是怎麼做的：

~~https://github.com/valums/file-uploader/blob/master/client/fileuploader.js#L995~~

https://github.com/FineUploader/fine-uploader

來源

2011-08-23 17:13:54 HyderA

感謝兄弟，對於我想要做的事似乎過於複雜，所以我想我會停止對ajax的提交，交易是我希望用戶能夠預覽他正在設置的圖像， m不知道如何做到這一點，因爲我使用的是CakePHP，而且我對於一般的web開發人員來說都是新鮮事物，所以我並沒有真正掌握所有事情的結構 – 8vius

正確的方法是我的用戶表中有一個字段，保存圖像的路徑，在我提交表單（非AJAX）以及表單信息的其餘部分時，我的項目其餘部分會自動保存，所以如果事先上傳圖像，我不確定之後如何獲得路徑。 – 8vius

您使用的插件通常會在文件上傳時提供路徑。如果不是，您可以修改服務器腳本以返回路徑。 – HyderA

基本上是一個AJAX將在鍵/值對的形式提交數據。由於是二進制文件數據，您無法使用Ajax提交文件..您需要使用標準格式提交數據，而不是使用服務器提交數據，因爲接受form/multipart

來源

2011-08-23 17:14:23

我試過這個鏈接，這對我很好。

http://portfolio.planetjon.ca/2014/01/26/submit-file-input-via-ajax-jquery-easy-way/

實施例：

$('#my-form').submit(function(e) { 
    $.ajax({ 
    url: 'http://host.com/action/', 
    type: 'POST', 
    data: new FormData(this), 
    processData: false, 
    contentType: false 
    }); 
    e.preventDefault(); 
});

來源

2015-10-09 07:51:23 asHkER

工作很好，謝謝。我正在使用filestyle，因此我以.filestyle（'clear'）結尾，並在之後清除輸入。 –

JQuery的AJAX不是形式

回答

相關問題