HTML5 + jQuery AJAX上传 - 没有文件发送到服务器

我试图通过HTML5的File API实现HTML5 ajax文件上传。它基于Afzaal Ahmad Zeeshan对this问题的回答。HTML5 + jQuery AJAX上传 - 没有文件发送到服务器

我的主要目标是能够让用户上传.xls和.xlsx电子表格供以后使用。

HTML

<form class="form-uploadXLS" method="post" action="php/uploadXLS.php" enctype="multipart/form-data"> 
    <div class="form-group"> 
     <div class="col-md-12"> 
      <input type="file" name="xls" class="xls" /> 
     </div> 
    </div> 
    <input type="button" value="Upload" class="btn-uploadXLS" /> 
</form> 
<progress></progress>

这里是jQuery的事件处理程序，就像上面提到的答案：

文件输入onChange事件：

$('.xls').on('change', function() { 
    var file = this.files[0]; 
    var fileName = file.name; 
    var fileType = file.type; 
    var fileSize = file.size; 

    console.log("file name: " + fileName + ", type: " + fileType + ", size: " + fileSize); 
});

这正常工作，该文件的名称，类型和大小被记录到服务器。

上传按钮的onClick事件：

$('.btn-uploadXLS').on('click', function (event) { 
    event.preventDefault(); 
    console.log("Upload button clicked"); 
    var formData = new FormData($('.form-uploadXLS')[0]); 

    $.ajax({ 
     url: 'php/uploadXLS.php', //Server script to process data 
     type: 'POST', 
     xhr: function() { // Custom XMLHttpRequest 
      var myXhr = $.ajaxSettings.xhr(); 
      if (myXhr.upload) { // Check if upload property exists 
       myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // For handling the progress of the upload 
      } 
      return myXhr; 
     }, 
     //Ajax events 
     beforeSend: function (stuff) { 
      console.log("BeforeSend"); 
      console.log(stuff); 
     }, 
     success: function (data) { 
      console.log("Success!"); 
      console.log(data); 
     }, 
     error: function (error) { 
      console.log("Error!"); 
      console.log(error); 
     }, 
     // Form data 
     data: formData, 
     //Options to tell jQuery not to process data or worry about content-type. 
     cache: false, 
     contentType: false, 
     processData: false 
    }); 
});

在服务器端，我使用这个PHP代码来检查文件是否已被发送到服务器

if(!empty($_FILES['xls'])) { 
    echo '<pre>',print_r($_FILES,1),'</pre>'; 
} 
else { 
    die('no $_FILES variable'); 
}

而这里的结果print_r的：

Array 
(
[xls] => Array 
(
[name] => 
[type] => 
[tmp_name] => 
[error] => 4 
[size] => 0 
) 

)

据the documentation，呃ror代码4表示：UPLOAD_ERR_NO_FILE Value: 4; No file was uploaded.

我在做什么错？

编辑：

如果我禁用click事件侦听并提交表单为正常，该文件都会没有问题上传。

我注意到，formData变量没有任何价值。这是formData价值，它已经设置后：FormData { append=append()}

来源

2014-03-06 PeterInvincible

是使用ajax你不能直接发送文件。检查这个链接，你需要获取文件数据在一个单独的变种，然后追加http://stackoverflow.com/questions/20097081/php-ajax-file-upload-error –

@AhhikChakraborty他已经做得很好。他如何通过ajax发送文件没有任何问题。 –

你尝试过不同的文件吗？不同的浏览器？您是否尝试禁用按钮点击处理，而不是让它提交表单以查看它是否在没有Ajax的情况下工作（用于调试）？ –

出于某种原因问题出在formData变量，之前的定义如下：

var formData = new FormData($('.form-uploadXLS')[0]);

我已经改变了指数为1这样的..

var formData = new FormData($('.form-uploadXLS')[1]);

..出于某种原因，现在的工作。

来源

2014-03-06 21:34:17 PeterInvincible

-1

相反的：

if(!empty($_FILES['xls'])) {

试试这个：

if(!empty($_FILES['xls']['name'])) {

类型= $_FILES['xls']['type']) TMP = $_FILES['xls']['tmp_name'])

来源

2014-03-06 21:02:24 SuperDJ

因为$ _FILES ['xls']实际上没有文件（正如您可以通过错误代码4猜测的那样），使用这种技术会导致死亡（'no $ _FILES变量'）; – PeterInvincible

HTML5 + jQuery AJAX上传 - 没有文件发送到服务器

回答

相关问题