Ajax 文件上传仅适用于 Opera答案

【问题标题】：Ajax file upload working only at OperaAjax 文件上传仅适用于 Opera
【发布时间】：2013-01-25 15:05:13
【问题描述】：

我尝试使用 Ajax 上传照片，编写的代码在 Opera（我的标准浏览器）中没有问题。现在我已经在其他浏览器中对其进行了测试，它们都返回错误。我的 PHP 脚本以

开头

if(!empty($_FILES)) {
    //todo
} else {
    exit();
}

所以我尝试将var_dump($_FILES); die(); 放在开头，看看有什么问题。他们都回馈array(0) {}。我已经在 FireFox、Chrome、Safari（所有最新版本）、win7 上的 IE9 和 Debian 上的最新 Firefox 上对其进行了测试。最大的问题，我不明白为什么它不起作用，因为在开发人员工具和上面的所有浏览器中，我可以在正确的位置看到正确名称的文件。

这是我要上传的 JS：

var photo_input1 = document.createElement('input');

photo_input1.setAttribute('type','file');
photo_input1.setAttribute('class','photo_input');
photo_input1.setAttribute('id','photo1');
photo_input1.addEventListener('change', function() {
    upload_photo(this.id,this.files[0])
});

var upload_photo = function(filename,file) {
    var data_arr = Array();
    data_arr['callback_name'] = 'upload_photo';
    upload_file(filename,file,'add_photo.php',data_arr);
}

var upload_file = function(filename,file,url,data_arr) {
    var datapack = null;
    var ajaxanswer = function() {
        try {
            if (ajax.readyState == 4) {
                if (ajax.status == 200) {
                    //todo
                } else {
                    alert('Problems:' + "\n" + ajax.statusText);
                }
            }
        } catch(e) {
        }
    }

    try {
        var ajax = new XMLHttpRequest();
    } catch(e) {
        try {
            var ajax = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try {
                var ajax = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                return false;
            }
        }
    }

    if(ajax) {
        if(typeof url != 'undefined') {
            datapack = new FormData;
            datapack.append(filename,file);
            if(typeof data_arr != 'undefined') {
                for(key in data_arr) {
                    datapack.append(key, data_arr[key]);
                }
            }
            ajax.open('POST',url, true);
            ajax.setRequestHeader('Content-type', 'multipart/form-data');
            ajax.onreadystatechange = ajaxanswer;
            ajax.send(datapack);
        }
    }
}

【问题讨论】：

浏览器控制台有错误吗？
没有错误，空响应，因为 $_FILES 为空
搜索 stackoverflow 以使用 Ajax 上传文件。
我已经阅读了大约 20 个讨论，但没有找到对我有帮助的答案。

标签： php javascript ajax file-upload

【解决方案1】：

无法使用 ajax 上传文件。正常的做法是使用 iframe 内部并使用 iframe 提交表单。您可以阅读其中一种方式here。

你也可以阅读this answer。

XHR2 支持通过 AJAX 上传文件。例如。通过FormData 对象，但不幸的是，并非所有/旧浏览器都支持它

【讨论】：

【解决方案2】：

FormData 仅适用于 Opera v12 及更高版本，与其他相对较新的浏览器一样：http://caniuse.com/#search=FormData

你可以试试这个类似 Ajax 的文件上传：https://github.com/valums/file-uploader。正如 Arun P Johny 所提到的，没有使用 Ajax 上传，但您可以使用一些解决方法，例如在这种情况下隐藏 iframe。

【讨论】：