xmlhttprequest 레일의 POST 메서드

Question

웹에서 로컬 파일 드래그 앤 드랍을 레일에있는 루비와 함께 서버에 업로드하고 파일을 드래그 앤 드롭하여 제대로 작동하지만 컨트롤러에서 드래그 한 파일 내용을 얻는 방법 방학 행사가 있니? event.datatransfer으로 파일을 가져오고 XMLHttpRequest과 함께 자바 스크립트를 통해 파일을 보내십시오.

function handleDrop(event) 
    { 
    preventDef(event) 

    var dt = event.dataTransfer; 
    var files = dt.files; 

    for(var i = 0; i < files.length;i++) 
    { 

     http_request = new XMLHttpRequest(); 
     var boundaryString = 'the_boundery--'; 
     var boundary = '--' + boundaryString; 
     var requestbody = boundary + '\n' 

     + 'Content-Disposition: form-data; name="thefilename"' + '\n' 
     + '\n' 
     + files[i].fileName + '\n' 
     + '\n' 
     + boundary + '\n' 
     + 'Content-Disposition: form-data; name="thefile"; filename="' 
     + files[i].fileName + '"' + '\n' 
     + 'Content-Type: application/octet-stream' + '\n' 
     + '\n'+files[i].path 
     +'\n'+ files[i].getAsBinary() 
     + '\n' 
     + boundary; 


     var preview = document.getElementById("preview"); 

     preview.src = files[i].getAsDataURL(); 

     var queryString=""; 

     queryString="filename="+files[i].fileName+'&'+"file_to_upload=="+files[i].getAsBinary(); 

     var actionUrl="/shortening/dr"; 
     http_request.open('POST',actionUrl,true); 
     http_request.setRequestHeader("Content-type", "multipart/form-data; \ 
      boundary=\"" + boundaryString + "\""); 
     http_request.setRequestHeader("Connection", "close"); 
     http_request.setRequestHeader("Content-length", requestbody.length); 
     http_request.sendAsBinary(requestbody); 
    } 
    } 

url 및 각 작업 방법 컨트롤러에서 requestbody을 얻는

와 컨트롤러를 호출하지 sendAsBinary 방법 Post 메소드를 통해 파일을 전송 호출이 스크립트를 사용하고 계십니까?

아이디어가 있으십니까?

Answer 1

먼저, AJAX와 거의 모든 것을 수행하기 위해 일종의 자바 스크립트 라이브러리를 사용하십시오. jQuery (http://jquery.com/)

Unfortunatelly 브라우저가 XmlHttpRequest를 통한 파일 업로드를 지원하지 않습니다. 언젠가 파이어 폭스를 지원하는 것에 대해 언젠가 전에 읽으십시오. 그러나 그것은 제한적 일 것이고, 나는 그것이 실제로 작동하는지조차 확신하지 못합니다.

iframe을 만들 수 있으며 드롭 이벤트를 사용하여 iframe 내부에 파일 필드를 설정 한 다음 iframe을 제출하십시오.