javascript - 使用支持 i.e 9 的 XMLHttpRequest 进行 AJAX 文件上传

Question

我正在尝试使用ajax上传文件。下面的代码可以在除 9 及之前版本之外的所有浏览器上完美运行。不幸的是，我被迫支持这些浏览器，所以我想知道如何修改此代码，以便它可以在 i.e. 上运行

我看到一些帖子建议使用 iframe，但我不知道这如何解决我的问题。

我尝试过使用 fileInput.name 因为它似乎不允许我拥有文件数组，这意味着我实际上可以到达它发送的行，但我不确定该行应该是什么是。 xhr.send(文件输入);好像没用。

也尝试过使用 formdata，但后来也发现 ie9 不支持这一点。

我们将非常感谢您的帮助。

 <script>
    function uploadFile(fileInput, label1, label2, filename) {
        var fileInput = document.getElementById(fileInput);

        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xhr.open('POST', 'Create/Upload');
        xhr.setRequestHeader('Content-type', 'multipart/form-data');
        //Appending file information in Http headers

        //xhr.setRequestHeader('X-File-Name', filename);
        xhr.setRequestHeader('X-File-Type', fileInput.files[0].name);
        xhr.setRequestHeader('X-File-Type', fileInput.files[0].type);
        xhr.setRequestHeader('X-File-Size', fileInput.files[0].size);
        xhr.setRequestHeader('X-Type', label1);
        //Sending file in XMLHttpRequest
        xhr.send(fileInput.files[0]);

        //xhr.send(fileInput);


        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                $('#' + label1).text(xhr.responseText.replace(/\"/g, ""));
                document.getElementById(label1).style.color = "green";
                document.getElementById(label2).style.display = 'none';
            }
            else {
                $('#' + label1).text("File upload failed");
                document.getElementById(label1).style.color = "red";
            }
        }
    }
    document.getElementById('uploaderAuto').onsubmit = function () {

        myfile = $('#fileInputAuto').val();
        var ext = myfile.split('.').pop();
        ext = ext.toLowerCase();
        if (ext == "pdf" || ext == "docx" || ext == "doc" || ext == "odf" || ext == "rtf") {
            uploadFile('fileInputAuto', 'Auto', "AutoView", myfile);
        } else {
            alert("The following is a list of accepted file types:\n\n - Word Document (*.doc)\n - Word Document (*.docx)\n - Portable Document Format (*.pdf)\n - Open Document Format (*.odf)\n - Rich Text Format (*.rtf)\n\nPlease choose a file with one of these file types.");
        }

        return false;
    }

    document.getElementById('uploaderOther1').onsubmit = function () {
        myfile = $('#fileInputOther1').val();
        uploadFile('fileInputOther1', 'Other1', 'Other1View', myfile);
        return false;
    }

    document.getElementById('uploaderOther2').onsubmit = function () {
        myfile = $('#fileInputOther2').val();
        uploadFile('fileInputOther2', 'Other2', 'Other2View', myfile);
        return false;
    }
</script>

Answer 1

我最终使用了这里的脚本:http://www.phpletter.com/Our-Projects/AjaxFileUpload/而且效果非常好。

我使用的是 asp.net 服务器端，所以本教程有帮助:http://totalpict.com/b/asp.net%20generic/5/34396