如何通过AJAX（无jQuery的）发送的multipart / form-data的形式内容？ [英] How to send multipart/form-data form content by ajax (no jquery)?

问题描述

我想无需重新加载页面发送某种形式的，我尽量不使用任何JavaScript库，了解下引擎罩的细节，因此：

I am trying to send some form without reloading the page and I am trying to understand the under-the-hood details therefore not using any JavaScript library:

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（）被调用，但如果我是正确的，数据不会被发送。请咨询有关发送数据的正确方法。

The upload_file() is called, but if I get it right, the data is not sent. Please advice regarding the correct way to send the data.

推荐答案

在形式传递属性 {URL：办法数据：{...}，回调：函数（ ）{}}

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
                   + "\r\nContent-Disposition: form-data; name=" + key
                   + "\r\nContent-type: application/octet-stream"
                   + "\r\n\r\n" + args[0].data[key] + "\r\n";
      }
      multipart += "--"+boundary+"--\r\n";
    }

    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){}
}

如果你想回去的响应，你可以使用这个

If you want to get back response you can use this

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

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

晚了一些更新

至于有关@Varun问题＆LT;输入类型='文件'＆GT; 上传，这code不能直接处理文件上传，以发送使用这种code文件，你需要使用的文件API 获得非二进制流（如64或任何其他BIN2HEX状）。

As for @Varun question about <input type='file'> uploads, this code can't handle file uploads directly, in order to send files using this code, you need to perform preprocessing of the raw file data using File API to get non-binary streams (like base64 or any other bin2hex-like form).

不过，因为它是2015年一年，我可以建议由多部分流一些更强大的建设运动，喜欢的 FORMDATA API 。

But, since it's a 2015 year, I can suggest to move from the construction of the multipart streams to something a bit more robust, like the FormData API.

这篇关于如何通过AJAX（无jQuery的）发送的multipart / form-data的形式内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！