Question

我有上传文件的cgi，当我使用<form>上传文件时，它运行良好，但如果我使用ajax发送数据......它不起作用......

表格是这样的：

<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>

如果我只是按下类型=＆＃39;提交＆＃39;

，它就可以工作

当我更改按钮的类型时，提交＆＃39;到＆＃39;按钮＆＃39;，然后尝试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.";
            }
        }
    }
}

单击按钮后，显示调试文本＆＃39; Uploaded：＆＃39;表示它发送文件数据，但xml（服务器端响应的内容）为空

我不确定是我的服务器端错误还是我的javascript端错误？

我猜文件应该是name =＆＃39; file＆＃39;。

任何建议都将不胜感激！

Answer 1

我发现了什么问题！

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

所以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.";
                    }
                }
            }

我太傻了〜谁知道上传文件时按钮的名称很重要？

感谢所有人给我任何建议！

无法使用ajax上传文件

1 个答案: