Question

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

我的主要目标是让用户上传.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，错误代码4表示：UPLOAD_ERR_NO_FILE Value: 4; No file was uploaded.

我做错了什么？

修改

如果我禁用click事件侦听器并正常提交表单，则文件上传时没有问题。

我注意到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'])) {

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

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

2 个答案: