数据形式的内容由Ajax（没有jQuery）？

我试图发送一些表单而不重新加载页面，我试图理解下面的细节，因此不使用任何JavaScript库：

var http = createRequestObject();
function createRequestObject() {
    var objAjax;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        objAjax=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        objAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }
    return objAjax;
}

function display_progress() { ... }    

function upload_file() {
    var request = 'UploaderServlet';
    http.open('post', request);
    http.onreadystatechange = display_progress;
    http.send(null); // HERE PROBABLY THE DATA SHOULD BE SENT
}

<form enctype="multipart/form-data" id="upload_form" name="upload_form" method="POST" action="UploaderServlet" onsubmit="upload_file(); return false;" target="upload_target">
Choose a file <br />  
<input name="file" size="27" type="file" id="file" /> <br/> 
<input type="submit" name="uploadSubmitButton" value="Upload" /><br /> 
<br />  
</form> 

<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>

upload_file（）被调用，但如果我正确的话，数据不会被发送。 请提供有关正确发送数据的方法。

---

以{url:"",method:"",data:{...},callback:function(){}}形式传递属性

var ajax=function(){
  try{
    var xml       =new XMLHttpRequest();
    var args      =arguments;
    var context   =this;
    var multipart ="";

    xml.open(args[0].method,args[0].url,true);

    if(args[0].method.search(/post/i)!=-1){
      var boundary=Math.random().toString().substr(2);
      xml.setRequestHeader("content-type",
                  "multipart/form-data; charset=utf-8; boundary=" + boundary);
      for(var key in args[0].data){
        multipart += "--" + boundary
                   + "rnContent-Disposition: form-data; name=" + key
                   + "rnContent-type: application/octet-stream"
                   + "rnrn" + args[0].data[key] + "rn";
      }
      multipart += "--"+boundary+"--rn";
    }

    xml.onreadystatechange=function(){
      try{
        if(xml.readyState==4){
          context.txt=xml.responseText;
          context.xml=xml.responseXML;
          args[0].callback();
        }
      }
      catch(e){}
    }

    xml.send(multipart);
  }
  catch(e){}
}

如果你想回复你可以使用这个

var response={};
ajax.call(response,{...args...})

并且您可以通过response.txt或response.xml检索所有数据

稍后更新一点

至于@Varun关于<input type='file'>上传的问题，这段代码无法直接处理文件上传，为了使用这段代码发送文件，需要使用File API预处理原始文件数据以获得非二进制流（如base64或任何其他类似bin2hex的表单）。

但是，从2015年开始，我可以建议从多部分流的构建转向更强大的部分，比如FormData API。

---

您的XMLHttpRequest代码看起来不错，但您传递给send的null 。 你需要传入一个包含要发送的数据的字符串（当然是正确编码）。

请注意，如果要发送由input[type=file]字段引用的input[type=file] ，则需要将其读入内存中，唯一的方法是使用新的File API，它不是广泛的 - 支持。

如果您尝试使用进度条发送文件，可以通过在支持File API的浏览器上通过File API发布的块来发布它，或许可以回到基于Flash的上传器swfupload如果浏览器不支持File API，并且如果浏览器不支持Flash，则回退到正常的表单提交。

---

需要传入一个包含要发送的数据的字符串（当然是正确编码）。

w File API，其中XMLHtth尚未得到广泛支持。

如果您在支持File API的浏览器上尝试使用le API，可能会回退到基于Flash的上传器。如果浏览器不支持该API，则likpRequest代码看起来不像您传递给send.e的swfupload， File API，如果浏览器不支持使用进度条发送文件，则可以回退到正常的表单提交，您可以通过发布您通过Fit Flash读取的内容块来实现。

链接地址: http://www.djcxy.com/p/19595.html

上一篇: data form content by ajax (no jquery)?

下一篇: Upload photo with Facebook Graph API and JavaScript: convert canvas image to multipart/form