javascript로 localhost의 파일 열기

Question

내 웹 사이트에 이미지 업 로더를 추가하려고합니다. jcrop (스크립트는 제 것이 아니라 인터넷에서 찾은 스크립트를 사용했습니다)과 자바 스크립트가 있습니다. 이 스크립트는 컴퓨터에서 이미지 파일을 가져 와서 PHP로 전달합니다. 양식 출력을 javascrip 파일로 변환하는 것으로 시작합니다.

var oFile = $('#image_file')[0].files[0]; 

이것은 스크립트의 주요 줄입니다. 그 외 모든 것은 oFile에서 파생됩니다. 사용자가 웹 링크를 추가하여 사진을 업로드 할 수있게하고 싶습니다. (이미 로컬 호스트에 이미지 파일을 저장하면 링크를 게시 할 수 있습니다.) 내 localhost에서 javascript로 이미지를 열고 위의 줄에 oFile 변수와 같은 형식으로 넣어서 스크립트가 함께 작동 할 수 있도록하려면 어떻게해야합니까?

Answer 1

당신은 파일로 자원을 가져 오기 위해 최신 브라우저에서 binary Ajax를 사용할 수 있습니다

이

var oReq = new XMLHttpRequest(); 
oReq.open("GET", fileURLGivenByUser, true); 
oReq.responseType = "blob"; 

oReq.onload = function(oEvent) { 
    var oFile = oReq.response; 
    processTheFileSomehow(oFile); 
}; 

oReq.send(); 

이 어느만큼 작동합니다

• fileURLGivenByUser 페이지와 같은 도메인에 스크립트 실행 (예 : 자르기 스크립트는 foo.com이고 이미지 링크는 foo.com) 또는

• 타겟 이미지 리소스 (예, 당신의 자르기 스크립트, 이미지 링크가 bar.com에 foo.com에서 실행하고, bar.com 허용 CORS의 헤더 파일을 제공)

그래서 Access-Control-Allow-Origin: * CORS 응답 헤더와 함께 제공됩니다, 사용자가 localhost 링크를 사용하려면 사용자가 로컬 웹 서버를 실행해야하며 해당 웹 서버는 이미지를 Access-Control-Allow-Origin: * 또는 Access-Control-Allow-Origin: whateverdomainyouuse.com (즉, 자르기 스크립트가 실행되는 도메인)으로 제공해야합니다.

CORS 제한 사항이 너무 제한적인 경우 (가능성이 높음) 호스트에서 server-side proxy을 사용할 수 있습니다. 예를 들어, 때

http://mydomain.com/proxy/http://targetdomain.com/image.png 

요청 서버가 작동 할 수 있습니다

http://targetdomain.com/image.png