Php HTML5+；jQuery AJAX上载-未向服务器发送文件

我试图在HTML5的文件API的帮助下实现HTML5Ajax文件上传。这是基于阿法扎尔·艾哈迈德·泽山对这个问题的回答

我的主要目标是能够让用户上传

.xls

和

.xlsx

电子表格供以后使用

HTML

如果工作正常，文件的名称、类型和大小将记录到服务器

上传按钮的

onClick

事件：

$('.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);
});

$('.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');
}

根据，错误代码

4

表示：

UPLOAD\u ERR\u NO\u文件值：4；未上载任何文件。

我做错了什么

编辑：

如果我禁用click事件监听器并按正常方式提交表单，则文件将顺利上载

我注意到，

formData

变量没有任何值。这是设置后

formData

的值：

formData{append=append（）}

而不是：

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

试试这个：

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

type=

$\u文件['xls']['type']）

---

tmp=

$\u FILES['xls']['tmp\u name']）

由于某种原因，formData变量出现了问题，以前定义为：

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

我已将索引更改为1，如下所示

---

。。由于某些原因，它现在可以正常工作。

是的，使用ajax u无法直接发送文件。选中此链接，您需要在一个单独的变量中获取文件数据，然后附加@AbhikChakraborty，因为他已经正确地完成了。他通过ajax发送文件的方式没有问题。你尝试过不同的文件吗？不同的浏览器？您是否尝试过禁用按钮单击处理，而是让它提交表单，以查看它是否可以在没有ajax的情况下工作（用于调试）？我看到您所做的唯一不同于其他许多示例的事情是将整个表单传递给FormData，而不仅仅是将文件添加到表单中。但是，查看文档，表单应该足够了。请尝试将输入名称更改为name=“xls[]”-eh。。。无需担心，这仅适用于允许选择多个文件进行上载的情况。由于$_文件['xls']实际上没有文件（您可以通过错误代码4猜到），使用此技术会导致死亡（'no$_filesvariable'）；

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

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

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