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

Question

我正在尝试借助HTML5的File API来实现HTML5 ajax文件上传。 它基于Afzaal Ahmad Zeeshan对这个问题的回答。

我的主要目标是让用户上载.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
)

)

根据文档 ，错误代码4表示： UPLOAD_ERR_NO_FILE Value: 4; No file was uploaded. UPLOAD_ERR_NO_FILE Value: 4; No file was uploaded.

我究竟做错了什么？

编辑：

如果我禁用了单击事件侦听器并按正常方式提交表单，那么文件上传将没有问题。

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

Answer 1

由于某种原因，问题出在formData变量上，该变量先前定义为：

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

我已经将索引更改为1。

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

..由于某种原因，它现在可以工作了。

Answer 2

代替：

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

尝试这个：

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

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