2013-07-13 3 views
1

Bash에서 cURL을 사용하여 공식 클라이언트 외부에서 업로드 할 수있는 답변을 찾았지만 XMLHttpRequest를 사용하여 JavaScript로 변환하는 데 어려움이 있습니다. 주요 문제는 Puush가 CORS를 지원한다고 생각하지 않는다는 것입니다. 여기 내 관련 코드는 지금까지의 :웹 서버에서 Puush에 파일을 업로드하는 방법은 무엇입니까?

var xml = new XMLHttpRequest(), 
    fd = new FormData(); 
xml.open("POST", "http://puush.me/api/up", true); 
xml.withCredentials = true; //I've tried with and without this line, neither seems to work 
//the following variables are specified from cURL demos I found 
fd.append("z", "poop"); //I honestly don't get this part 
fd.append("e", "[email protected]"); 
fd.append("k", apiKey); //which I copied from my account settings on Puush 
fd.append("f", input.files[0]); //where "input" is <input type="file"/> 
//add event handlers 
xml.addEventListener("progress", progress); 
xml.addEventListener("load", loaded); 
xml.addEventListener("error", error); 
xml.addEventListener("abort", aborted); 

xml.send(fd); //send the FormData as a "multipart/form-data" request 
난 항상 서버가 응답하지 않았다고 말하는 콘솔에서 오류 로그와 상관없이 항상 오류 처리기가 호출되는 내가 무엇을 시도하고 동일한 응답을 얻을

Access-Control-Allow-Origin: http://localhost (예 : null 원점도 거부되었으므로 file : // 프로토콜을 사용하지 않았습니다.)

편집 : 원래 bash는 코드는 다음 링크에서 확인할 수 있습니다
http://pastebin.com/ZnbY91EA
https://github.com/nekodex/lazymode/blob/master/puush/puu.sh
https://github.com/blha303/puush-linux/blob/master/puush
https://github.com/NickHu/puush-linux/blob/master/puush

답변

1

실제로 완전히 통과 요청을 밝혀,하지만 인해의 본질에 CORS에서는 응답이 거부됩니다. 따라서 파일은 업로드되지만 응답은 오류를 발생시킵니다. CORS 단점을 해결하기 위해 내 서버를 통해 요청을 파이프하기로 결정했습니다.

0

Puush가 CORS를 지원하지 않는다고 생각합니다. CORS의 특성으로 인해 응답이 거부됩니다. 따라서 파일은 업로드되지만 응답은 오류를 발생시킵니다.

나는 사이트, 웹 사이트를 통해 지원하는 업로드 파일, GomuPuush을 발견했다. 사용자가 파일을 제출, 파일이 자신 구축하려는 경우

을 puush.me하는 puush_api.php에 의해 운반되어, 당신은 내가 GomuPuush 사이트에서 스 니펫이 HTML 양식을 사용할 수 있습니다

<form action="http://127.0.0.1/yuikao/labs/puushme/puush_api.php" enctype="multipart/form-data" method="post"> 
     <fieldset> 
      <br> 
      <legend>Puush File Upload</legend> 
      <label>File: 
      <input id="uploadfiles" name="f" multiple="multiple" type="file" > 
      <br></label><br /> 
      <label>Delimiter: 
      <input type="text" value=";" placeholder="; or |" name="delimiter" id="delimiter"> 
      <br></label><br /> 
      <input type="submit" value="S̶u̶b̶m̶i̶t̶! Auto Upload"/> 
     </fieldset> 
    </form> 
    <fieldset> 
      <legend>Result</legend><br>    
      <label>Uploaded </label><br> 
      <textarea id="inputContent" rows="9" class="the-fix"></textarea><br /> 
     </fieldset> 

및이 자바 스크립트를 포함

/** 
 
* Created by remi on 17/01/15. 
 
*/ 
 
(function() { 
 

 
    var uploadfiles = document.querySelector('#uploadfiles'); 
 
    uploadfiles.addEventListener('change', function() { 
 
     var files = this.files; 
 
     for(var i=0; i<files.length; i++){ 
 
      uploadFile(this.files[i]); 
 
     } 
 

 
    }, false); 
 

 

 
    /** 
 
    * Upload a file 
 
    * @param file 
 
    */ 
 
    function uploadFile(file){ 
 
     var url = "http://yuikao.com/labs/gomupuush/puush_api.php"; // puush file to puush.me service 
 
     var xhr = new XMLHttpRequest(); 
 
     var fd = new FormData(); 
 
     xhr.open("POST", url, true); 
 
     xhr.onreadystatechange = function() { 
 
      if (xhr.readyState == 4 && xhr.status == 200) { 
 
       // Every thing ok, file uploaded 
 
\t \t \t \t $("textarea#inputContent").val($("textarea#inputContent").val()+xhr.responseText); 
 
       // console.log(xhr.responseText); // handle response. 
 
      } 
 
     }; 
 
     fd.append('delimiter', $("#delimiter").val()); 
 
     fd.append('f', file); // f = <input id="uploadfiles" name="f" multiple="multiple" type="file" data-href="http://127.0.0.1/yuikao/labs/puushme/puush_api.php"> 
 
     xhr.send(fd); 
 
    } 
 
}());

+0

귀하의 의견을 보내 주셔서 감사합니다. 그러나 나는 이미 "CORS의 본질 때문에 응답이 거절되었다"고 축 어적으로 언급했다. 또한 GomuPuush 서비스 대신 자체 서버를 사용했으며, 내 대답에 아직 답을하지 않은 질문에 대한 답변을 귀하의 답변이 추가하지 않는다고 생각합니다. –

관련 문제