Ajax PHP文件上传错误

Question

我在客户端有这段代码：

fileUpload: function monkey(){
        var file = t.gI("photoFile"); //get element by photoFile
        var formData = new FormData();
        console.log(file.files.length);
        formData.append("upload", file.files[0]);
        var req = t.gR(); //XMLHTTPRequest
        req.open('POST', 'php/fileupload.php', true);
        req.setRequestHeader("Content-Type", "multipart/form-data", true);
        req.send(formData);
        req.onreadystatechange = function () {
            if (req.readyState === 4) {
                if (req.status == 200 && req.status < 300) {
                    t.gI("eventBox").innerHTML = req.responseText; //eventbox error handler
                    adminHandler.eventBox();
                }
            }
        }
    },

这在服务器端：

<?php
    header('Content-Type:multipart/form-data');

    echo $_FILES['upload']['tmp_name'];
?>

我收到了这个错误消息：

[15-Jun-2015 12:03:21 UTC] PHP 警告：multipart/form-data POST 数据在第 0 行的未知中缺少边界 [15-Jun-2015 12:03:21 UTC] PHP 注意：未定义索引：在 /home/webprogb/public_html/php/fileupload.php 第 4 行上传

我能做些什么来解决它？

Answer 1

您可以使用此代码在纯 javascript 中使用 ajax 上传文件。根据文件字段ID更改此“#fileUploader”。

var AjaxFileUploader = function () {
    this._file = null;
    var self = this;

    this.uploadFile = function (uploadUrl, file) {
        var xhr = new XMLHttpRequest();
        xhr.onprogress = function (e) {
           //error
        };

        xhr.onload = function (e) {
            //error
        };

        xhr.onerror = function (e) {
            //error
        };

        xhr.open("post", uploadUrl, true);

        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.setRequestHeader("X-File-Name", file.name);
        xhr.setRequestHeader("X-File-Size", file.size);
        xhr.setRequestHeader("X-File-Type", file.type);

        xhr.send(file);
    };
};

AjaxFileUploader.IsAsyncFileUploadSupported = function () {
    return typeof (new XMLHttpRequest().upload) !== 'undefined';
}

 if (AjaxFileUploader.IsAsyncFileUploadSupported) {
        ajaxFileUploader = new AjaxFileUploader();

        $("form").submit(function () {
            var uploader = $("#fileUploader")[0];

            if (uploader.files.length == 0) {
                return;
            } else {
                ajaxFileUploader.uploadFile(
                    "/YourUploadUrl",
                    uploader.files[0]);
            }

            return false;
        });
    }