使用jQuery AJAX通過FormData上傳文件

我想僅使用jQuery上傳單個文件，然後用處理文件上傳的PHP腳本的輸出替換上載表單。使用jQuery AJAX通過FormData上傳文件

當前我單擊提交後，我收到來自PHP腳本的空白響應。我認爲這是因爲表單數據（文件和上傳輸入）正在被上傳數據覆蓋？

任何幫助解決這個問題，非常感謝！

這裏是我的代碼：

HTML

<div id="container"> 
    <form id="form" enctype="multipart/form-data"> 
     <input name="file" type="file"> 
     <input type="hidden" name="upload"> 
    </form> 
    <a href="javascript:void(0)" onclick="uploadData($('#form').serialize(), 'upload.php', '#container'); return false;">Upload &gt;</a> 
</div>

的JavaScript

function uploadData(data, url, container) { 

    var formData = new FormData($(data)[0]); 

    $.ajax({ 
     type: 'POST', 
     url: url, 
     data: formData, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function(response) { 
      $(container).html(response); 
     }, 
     error: function() { 
      alert('Error!'); 
     }, 
    }); 

    return false; 
};

PHP

if (isset($_POST['upload'])) { 

    // check the file has been uploaded 
    if (isset($_FILES['file'])) { 

     // check if there was an error uploading the file 
     if ($_FILES['file']['error'] > 0) { 

      // display error 
      echo 'Error: ' . $_FILES['file']['error']; 
     } else { 

      // move and store file (overwrite if it already exists) 
      $fileName = '/upload/' . $_FILES['file']['name']; 
      move_uploaded_file($_FILES['file']['tmp_name'], $fileName); 

      echo 'File uploaded successfully'; 
     } 
    } else { 

     die ('Error: No file selected for upload'); 
    } 

}

來源

2013-04-20 cianz

在$ _ POST [「importProducts」]，其中是發送從Ajax調用importProducts我看不出來。 – 2013-04-20 06:46:34

哎呀，我剛纔修復了 – cianz 2013-04-20 06:54:28

以便修復問題嗎？ – 2013-04-20 07:00:27

我不認爲ajax可以處理文件上傳。你檢查過這個文件是否真的上傳了嗎？

如果屬實，您的回覆爲空，因爲isset($_POST['upload'])返回false。嘗試添加最後else語句，來檢查我在說什麼：

if (isset($_POST['upload'])) { 
    ... 
} else { 
    die ('Error: AJAX cannot handle file uploads'); 
}

來源

2013-04-20 21:41:56

謝謝！你是對的，它拋出了那個錯誤。我用來上傳文件的代碼是基於應該工作的代碼，我在這裏評分最高的帖子中找到了：http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously -with-jquery – cianz 2013-04-20 21:59:20

我不知道FormData功能，它非常有趣。對於我所看到的，你可以用'data'調用你的函數，'data'是序列化的字符串，但是你可以用'$（data）'作爲參數來調用'FormData'。在這種情況下，'$（data）'意味着什麼（數據不是選擇器）。嘗試改變'var formData = new FormData（$（'＃form'））;''的行。此外，爲了檢查真正到達PHP文件的內容，我會在文件的開頭添加'print_r（$ _ POST）;'和'print_r（$ _ FILES）;'。 – 2013-04-21 05:17:41

使用jQuery AJAX通過FormData上傳文件

回答

相關問題