Ajax(jquery 없음)로 멀티파트/폼 데이터 양식 콘텐츠를 보내는 방법은 무엇입니까?

Ajax(jquery 없음)로 멀티파트/폼 데이터 양식 콘텐츠를 보내는 방법은 무엇입니까?

나는 페이지를 다시 로드하지 않고 일부 양식을 보내려고 노력하고 있으며, 따라서 어떠한 자바스크립트 라이브러리도 사용하지 않는 후드 아래의 세부 사항을 이해하려고 노력하고 있습니다.

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
                   + "\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){}
}

응답을 다시 받으려면 다음을 사용할 수 있습니다.

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

모든 데이터를 검색할 수 있습니다.response.txt또는response.xml

조금 늦은 업데이트

에 대한 @Varun 질문에 대해서는<input type='file'>업로드, 이 코드는 파일 업로드를 직접 처리할 수 없습니다. 이 코드를 사용하여 파일을 보내려면 File API를 사용하여 원시 파일 데이터의 전처리를 수행하여 base64 또는 다른 bin2hex와 같은 형식의 바이너리가 아닌 스트림을 가져와야 합니다.

하지만, 2015년이기 때문에, 저는 멀티파트 스트림의 구성에서 FormData API와 같은 좀 더 강력한 것으로 전환할 것을 제안할 수 있습니다.

당신의.XMLHttpRequest코드는 다음을 제외하고 괜찮아 보입니다.null당신은 에 합격하고 있습니다.send전송할 데이터가 포함된 문자열을 전달해야 합니다(물론 올바르게 인코딩됨).

참조된 파일을 보내려는 경우input[type=file]필드에서 메모리로 읽어 들여야 하며, 이를 위한 유일한 방법은 아직 광범위하게 지원되지 않는 새로운 파일 API를 사용하는 것입니다.

진행률 표시줄이 있는 파일을 보내려는 경우 File API를 지원하는 브라우저에 File API를 통해 읽은 블록을 게시하여 파일 API를 지원하는 브라우저에 게시할 수 있습니다. 브라우저가 File API를 지원하지 않는 경우 swupload와 같은 플래시 기반 업로더로 폴백하고 브라우저가 플래시를 지원하지 않는 경우 일반 양식 제출로 폴백할 수 있습니다.

전송할 데이터가 포함된 문자열을 전달해야 합니다(물론 인코딩되지 않음).

w XMLHth는 아직 광범위하게 지원되지 않는 파일 API입니다.

파일 API를 지원하는 브라우저에서 le API를 시도하는 경우, 브라우저가 파일 API를 지원하지 않는 경우 send.esupload에 전달하는 null 이외의 플래시 기반 업로더 likpRequest 코드로 폴백하고, 브라우저가 진행률 표시줄이 있는 파일 전송을 지원하지 않는 경우 일반 양식 제출로 폴백할 수 있습니다.Fit Flash를 통해 읽은 You 블록을 게시하여 이를 수행할 수 있습니다.

언급URL : https://stackoverflow.com/questions/5933949/how-to-send-multipart-form-data-form-content-by-ajax-no-jquery