在PHP端,带有文件和数据的纯javascript FormData上传失败

时间:2017-06-18 14:14:02

标签: javascript php ajax

我有一个典型的文件上传表单:

<form id="attachform" enctype="multipart/form-data" action="/app/upload.php" method="POST" target="attachments">
        <!-- MAX_FILE_SIZE must precede the file input field -->
        <input type="hidden" name="func" value="addattach" />
        <input type="hidden" name="relnum" value="{$relnum}" />
        <input type="hidden" name="MAX_FILE_SIZE" value="75000" />
        <!-- Name of input element determines name in $_FILES array -->
        Select file: <input type="file" name="userfile" id="userfile" /><br/>
        Add a file name: <input type="text" id="filename" name="filename" />
    </form>
    <input type="button" id="uploadbutton" value="Attach File" onclick="addAttachment('/app/upload.php','attachform','{$relnum}','userfile','filename','uploadbutton','attachments');" />

我正在使用纯javascript ajax,而不是jQuery: 这是完整的javascript函数

function addAttachment(APPPATH,theform,relnum,filebox,filename,thebutton,thetarget){
var f = document.getElementById(filename);
var fb = document.getElementById(filebox);
var tb = document.getElementById(thebutton);
var t = document.getElementById(thetarget);
var fm = document.getElementById(theform);
///*
if(fm){
    tb.value = "Uploading...";

    var fdata = new FormData(fm);
    var xFile = new ReportXRequest(APPPATH, fdata, t, "att");
    if(xFile)
        xFile.sendRequest("multipart/form-data");

}

}

ReportXRequest是我的ajax对象,适用于我的整个网站。我在jQuery存在之前构建它。

这是我的请求对象:

function ReportXRequest(theurl, theparams, thetarget, theoption, /* optional */ thedataform, thefocusitem){

var url = theurl;
var req = null;
var params = theparams;
var target = thetarget;
var myoption = theoption;
var dataform;  // = thedataform;
var focusitem;

dataform = thedataform || null;
focusitem = thefocusitem || null;

this.onReadyStateChange = function(){
    if(req.readyState == 4){
        if(req.status == 200){
            try{
                var response = req.responseText;

                switch(myoption){


                    case 'att':
                        var ans = response.split("=");
                        if(ans[1] == "ERROR"){
                            target = document.getElementById('actionnotice');
                            target.innerHTML = ans[0];
                            setTimeout("clearActionnotice()", 3500);
                            break;
                        }
                        target.innerHTML = response;
                        var f = document.getElementById(dataform);
                        if(f) {f.reset();}
                        if(focusitem){
                            var fi = document.getElementById(focusitem);
                            if(fi)
                                fi.focus();
                        }
                        break;


                }

            }
                catch(e){
                    alert("Error retrieving report data:\n" + e.toString());
            }
        }
    }
}

this.sendRequest = function(contenttype="application/x-www-form-urlencoded"){
    req = this.getHttpRequestObject();
    if(!req){
        alert("Cannot instantiate request object!");
        return false;
    }
    req.onreadystatechange = this.onReadyStateChange;   
    req.open("POST",url,true);
    req.setRequestHeader("Content-Type",contenttype);
    req.send(params);
    return true;
}
this.getHttpRequestObject = function(){
    var txhp;
    try
    {
        txhp = new XMLHttpRequest();
    }
    catch(e)
    {
        try
        {
            txhp = new ActiveXObject("Microsoft.XMLHttp");
        }
        catch(e2)
        {
            try
            {
                txhp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e3)
            {
                return false;
            }
        }
    }
    return txhp;
}

}

在服务器上,我无法阅读和使用$_REQUEST$_POST$_FILES$_FILES是空的。其他两个已填充,但我无法像通常那样使用数组提取数据:

$value = $_POST['indexname'];

var_dump为$_REQUEST$_POST的内容如下:

请求数组:

array(23) { ["-----------------------------15853197524937 Content-Disposition:_form-data;_name"]=> string(1010) ""func" addattach -----------------------------15853197524937 Content-Disposition: form-data; name="relnum" 18 -----------------------------15853197524937 Content-Disposition: form-data; name="MAX_FILE_SIZE" 75000 -----------------------------15853197524937 Content-Disposition: form-data; name="userfile"; filename="Mamaroneck_Lady.jpg" Content-Type: image/jpeg "image file" -----------------------------15853197524937 Content-Disposition: form-data; name="filename" ML -----------------------------15853197524937-- " ["sid"]=> string(32) "f4f4aeaf385575530e406621301ff2d6" ["perm"]=> string(8) "44444444" ["folder"]=> string(12) "deltatesting" ["tid"]=> string(1) "1" ["uid"]=> string(2) "19" ["clid"]=> string(4) "1054" ["prid"]=> string(1) "1" ["rpid"]=> string(1) "1" }

The post array:

array(15) { ["-----------------------------15853197524937 Content-Disposition:_form-data;_name"]=> string(1010) ""func" addattach -----------------------------15853197524937 Content-Disposition: form-data; name="relnum" 18 -----------------------------15853197524937 Content-Disposition: form-data; name="MAX_FILE_SIZE" 75000 -----------------------------15853197524937 Content-Disposition: form-data; name="userfile"; filename="Mamaroneck_Lady.jpg" Content-Type: image/jpeg "image file" -----------------------------15853197524937 Content-Disposition: form-data; name="filename" ML -----------------------------15853197524937-- " }

我用引号“image file”替换了实际的图像文件。

有什么建议吗?

谢谢。

1 个答案:

答案 0 :(得分:0)

内容类型需要是multipart / form-data 并指定边界作为参数。

您不知道边界是什么,因此您需要不指定内容类型标题

当您将FormData对象传递给XHR的send方法时,浏览器将为您生成正确的。