通過Ajax將圖像上傳到PHP

Question

我試圖基於以下問題在我的應用程序中創建圖像上載字段： 通過JQuery AJAX一起發送FormData和String數據嗎？
和本教程： http : //www.formget.com/ajax-image-upload-php/
我聽說這很困難，這是我嘗試過的。

的HTML

<form method="POST" action="" id="logo_upload">
    <input type="file" name="logo_location" id="logo_location" enctype="multipart/form-data">
    <button type="submit" name="file_test" id="file_test">Test Upload</button>
</form>

jQuery查詢

$('#logo_upload').submit(function(e) {
    e.preventDefault();
    var formData = new FormData();
    var file_data = $('#logo_location')[0].files[0];
    formData.append("file", file_data[0]);

    $.ajax({
        url: "../../../controllers/ajax_controller.php?action=image_upload",
        type: 'POST',
        data: formData ,
        cache: false,
        contentType: false,
        processData: false,
        id: id
    });
});

的PHP

var_dump($_FILES);
var_dump($_POST);

如您所見，我還沒有上傳東西。

結果

<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=0)</i>
  <i><font color='#888a85'>empty</font></i>
</pre>

<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=0)</i>
  <i><font color='#888a85'>empty</font></i>
</pre>

我看不到我在做什么錯，我得到了一個結果，所以它來對了地方，有人能指出我正確的方向嗎？

編輯：以格式var file_data = $（'＃logo_location'）[0] .files [0];的形式添加了#logo_upload；
編輯：用formData變量替換數據
編輯：添加的屬性：enctype =“ multipart / form-data”
新結果：

<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=1)</i>
  'file' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'undefined'</font> <i>(length=9)</i>
</pre>

Answer 1

1. 我在您的表單中看不到logo_upload ID。
2. 上載文件時，表單屬性必須為enctype =“ multipart / form-data”。
3. 您的ajax中的數據參數獲取變量，即未定義。 再次查看您的參考鏈接。

希望這對您有幫助

Answer 2

要追加file_data[0]到FORMDATA對象， file_data是文件不是一個數組，使用file_data 。

$('#logo_upload').submit(function(e) {
    e.preventDefault();
    var formData = new FormData();
    var file_data = $('#logo_location')[0].files[0];
    formData.append("file", file_data);

    $.ajax({
        url: "../../../controllers/ajax_controller.php?action=image_upload",
        type: 'POST',
        data: formData ,
        contentType: false,
        processData: false,
        success: function(data){
            console.log(data);
        }
    });
});

您也可以使用相關表單實例化表單數據對象，而無需執行附加操作。

$('#logo_upload').submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.ajax({
    ...

Answer 3

您在此處傳遞錯誤的變量，並且未在ajax請求中定義成功：

$('#logo_upload').submit(function(e) {
e.preventDefault();
var formData = new FormData($('#your_form_id')[0]);

$.ajax({
    url: "../../../controllers/ajax_controller.php?action=image_upload",
    type: 'POST',
    data: formData,
    success: function(result){
        alert(result);
    }
    cache: false,
    contentType: false,
    processData: false
});
});