HTML5 파일 API를 사용하여 웹 응용 프로그램에 파일을 업로드하고 있습니다.HTML5 파일 API를 사용하여 URL에 저장된 파일 읽기
은 내가 파일을 읽고 업로드 기능
<input type="file">
$('input[type="file"]').on("change",function(e){
console.log(this.files);
// upload each file in this.files
});
이 OS의 기본 파일을 완벽하게 작동 부르는 사용하여 내 웹 페이지에 입력 요소가 있습니다. 원격 파일 (예 : example.com/blah/file1.jpg)을 업로드하고 싶습니다. 제 질문은 File API를 사용하여이 파일을 읽는 방법입니다. 그것을 할 수있는 방법이 있습니까?
XMLHttpRequest을 통해 원격 파일을 다운로드하여 Blob으로 처리 할 수 있습니다. 그런 다음 다른 서버에 업로드하십시오. 업로드는 XMLHttpRequest 이상이어야합니다. 그것은이 링크는 당신이 필요합니다 코드 조각을 포함 XHR 레벨 2의 브라우저의 구현에 의존 :
http://www.html5rocks.com/en/tutorials/file/xhr2/
그것은 Blob 원격 파일을 다운로드하여 서버에 Blob을 업로드 두 조각이있다.
고마워 호랑이, var Blob = new Blob ([this.response], {type : 'image/png'});을 말할 때 모든 메타 데이터를 잃어 버리는 것을 제외하고는 매력처럼 작동했습니다. 이 작업을 수행 한 후 어떻게 파일 이름을 가져 옵니까? – sublime
@sublime : 네트워크를 통해 파일을 가져 오는 경우 "파일 이름"이 있다고 생각하지 않습니다. '/ download? id = 1234'라고 말하면 파일 이름이 전혀 없습니다. 따라서 파일 이름을 가져 오는 것에 대한 자신 만의 규칙을 설정해야합니다. 대부분의 브라우저에서 수행하는 작업을 수행 할 수 있습니다. 1. URI 경로의 마지막 부분을 가져 와서 파일로 처리합니다. 2. 응답 헤더에'content-disposition'이 있으면 표준을 따라 파일 이름으로 그 내용을 사용하십시오. –
고마워요, 마지막 질문 : 일부 이미지 URL은 base64로 인코딩 된 데이터 문자열입니다. data : image/jpeg; base64,/9j/4AAQSkZJRgABAQ ...이 경우 브라우저에서 XMLHttpRequest가 data : image를로드 할 수 없다는 오류가 발생하면 HTTP에 대해서만 크로스 원본 요청이 지원됩니다. 이미지를 어떻게 다운로드합니까? – sublime
사용자가 URL을 붙여 넣기위한 TextBox 만 제공하면됩니다. 그런 다음 서버 측에서 URL을 기반으로 파일을 검색 할 수 있습니다. – mason
이 작업은 클라이언트 측에서 수행해야합니다. 브라우저 확장입니다. 먼저 사용자의 브라우저에 파일을 다운로드 한 다음 업로드해야합니다. – sublime
왜 사용자의 컴퓨터에 다운로드 한 다음 서버에 업로드해야합니까? 그것은 추가 단계입니다. JavaScript의 메모리에 저장하면 성능이 현저하게 떨어질뿐만 아니라 사용자의 대역폭을 소비하게됩니다. – mason