无法使用Ajax上传文件 [英] Cannot upload file using ajax

问题描述

我有用于上传文件的cgi，当我使用< form> 来上传文件时，它的效果很好，但是如果我使用ajax发送数据，则无法使用......

I have cgi for upload files, when I use the <form> to upload files, it works great, but it doesn't work if I use ajax to send data......

表单如下:

<form id="confUpdate" enctype="multipart/form-data" method="post" action="upload.cgi">
    <input id='upLoad' type='file' name="file">
    <input id='btnUpload' type="submit" name="send" value="Upload">
</form>

如果我只让按钮type ='submit'，它就可以工作.

It can work if I just let the button type='submit'.

当我将按钮提交"的类型更改为按钮"时，尝试使用javascript:

When I change the type of button 'submit' to 'button', and try javascript:

window.onload=function(){
    var upfile=document.getElementById("upLoad");
    var upform=document.getElementById("confUpdate");
    var btnUpload=document.getElementById("btnUpload");
    var info=document.getElementById("InfoText");
    var xhr;
    btnUpload.onclick=function(){
        var file=upfile.files;
        var formData=new FormData();
        if(file[0].name.split(".")[1]!="bin"){
            info.innerHTML="The file should be .bin file.";
        }else{
            info.innerHTML="";
            formData.append("file",file[0],file[0].name);
        }
        if (window.XMLHttpRequest) {
            xhr=new XMLHttpRequest();
        }else{
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
        try{
            xhr.open('POST', 'upload.cgi', true);
            xhr.setRequestHeader("content-type","multipart/form-data");
            xhr.onreadystatechange = onReceive;
            xhr.send(formData);
        }catch(e){
            xhr.abort();
        }
    }

    function onReceive(){
        var xml;
        var elem;
        if(xhr.readyState==4){
            if(xhr.status==200){
                xml=xhr.responseText;
                info.innerHTML="Uploaded:"+xml;
            }else{
                info.innerHTML="Something is error.";
            }
        }
    }
}

单击按钮后，调试文本显示为'Uploaded:'，表示它正在发送文件数据，但是xml(服务器端响应的内容)为空.

After I clicking the button, the debug text is show 'Uploaded:', means it's send the file data, but the xml( content of the respond by server side) is empty.

我不确定是服务器端错误还是JavaScript端错误?

I'm not sure it's my server side error or my javascript side error?

我想文件应该是name ='file'.

I guess the file should be name='file'.

任何建议将不胜感激！

推荐答案

我发现了问题所在！

我检查了上传的api，发现我也需要发送按钮的名称！

I check the api of the upload, and found that I need to send the name of the button, too!

所以ajax现在是:

            var upfile=document.getElementById("upfile");
            var upform=document.getElementById("upform");
            var btnUpload=document.getElementById("btnUpload");
            var info=document.getElementById("InfoText");
            var xhr;

            upform.onsubmit = function(event){
                event.preventDefault();

                info.innerHTML="";

                var files=upfile.files;
                var formData=new FormData();
                if(files[0].name.split(".")[1]!="bin"){
                    info.innerHTML="The file should be .bin file.";
                }else{
                    info.innerHTML="Uploading, please wait.";
                    formData.append("file",files[0],files[0].name);
                    formData.append("send","Send");

                    if (window.XMLHttpRequest) {
                        xhr=new XMLHttpRequest();
                    }else{
                        xhr=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    try{
                        xhr.open('POST', 'upload.cgi', true);
                        //xhr.setRequestHeader("Content-Type","multipart/form-data");
                        xhr.onreadystatechange = onReceive;
                        xhr.send(formData);
                    }catch(e){
                        xhr.abort();
                    }
                }
            }

            function onReceive(){
                var xml;
                var elem;
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        xml=xhr.responseText;
                        info.innerHTML="Uploaded:"+xml;
                    }else{
                        info.innerHTML="Something is error.";
                    }
                }
            }

我真是愚蠢〜谁知道我上传文件时按钮的名称很重要?

I'm so foolish~ Who knows that the name of button is important when I upload a file?

感谢所有给我的建议！

这篇关于无法使用Ajax上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！