使用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'); 
    } 

}

在$ _ 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'); 
}

谢谢！你是对的，它抛出了那个错误。我用来上传文件的代码是基于应该工作的代码，我在这里评分最高的帖子中找到了：http://*.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上传文件

相关推荐