AJAX文件上传XMLHttpRequest,支持即9

时间:2014-05-22 06:44:29

标签: javascript jquery ajax xmlhttprequest

我正在尝试使用ajax上传文件。下面的代码适用于所有浏览器,除了9和以前的版本。不幸的是,我被迫支持这些浏览器,所以我想知道如何修改这个代码,以便它可以工作,即。

我看过一些帖子建议使用iframe,但我看不出这是如何解决我的问题。

我已经尝试过使用fileInput.name,因为它似乎并不允许我拥有一个文件数组,这意味着我实际上可以到达它发送的行,但我不确定那条线应该是什么。 xhr.send(的FileInput);似乎不起作用。

还试图使用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>

1 个答案:

答案 0 :(得分:0)

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

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