JavaScript를 사용하여 이미지를 업로드하는 방법

XMLHttpRequest Level2가 도입되기 전에는 대부분의 비동기 이미지 업로드가 iframe을 사용하여 구현되었습니다.

구체적인 구현 세부 사항에 대해서는 Google에 이에 대한 기사가 없습니다.

이번에는 새로운 API를 사용하여 이미지를 업로드하는 방법에 대해 주로 이야기하겠습니다.

우선 XMLHttpRequest Level2의 몇 가지 새로운 기능이 필수적입니다.

가장 실용적인 것은 FormData 객체로, 폼의 Dom 객체를 직접 FormData 객체로 변환하여 서버로 보내는 것입니다.

Progress 이벤트도 지원됩니다. 드디어 비동기 업로드 진행률 표시줄을 볼 수 있습니다!

대부분의 사람들이 Ruan Yifeng의 "XMLHttpRequest 레벨 2 사용자 가이드"를 읽어야 하므로 여기서 헛소리는 하지 않겠습니다. 그냥 코드만 게시하세요.

1 var formData= new FormData(form),

2 xhr= new XMLHttpRequest();

3

4 xhr.open("POST", url);

5 xhr.send(formData)

인터페이스 부분도 PHP와 같이 매우 간단합니다. $_POST 및 $_FILES를 사용하면 됩니다. 관련 데이터를 얻으세요.

네, 아주 간단합니다.

진행 시간을 모니터링하여 현재 데이터 업로드/다운로드의 진행 상황을 확인할 수 있습니다.

1 xhr.upload.onprogress = 함수(e) {

2 console.log(e.loaded / e.total * 100 ); // 업로드 진행

3 }

4

5 xhr.onprogress = function (e) {

6 console.log(e. load / e.total * 100); // 다운로드 진행률

7 }

XMLHttpRequest Level2 지원은 여전히 ​​모바일 측면에서 이상적입니다.

오랫동안 수많은 프런트엔드 브라우저가 JavaScript 액세스 로컬 파일 API를 제공할 수 있었습니다.

사실 IE는 오랫동안 ActiveX를 이용해 로컬 파일을 조작할 수 있었지만 W3C 표준이 아니기 때문에 IE만 플레이해왔습니다.

2012년 10월 25일 W3C는 파일 API 초안을 수립했습니다.

또한 FileReader 개체는 File 개체와 함께 사용됩니다. 구체적인 용도는 나중에 다루겠습니다.

다음은 두 사람의 응원 내용으로, 상황은 비교적 보통 수준이다. 하지만 먼저 익히면 거의 충분하군요~ 하~

먼저 File 객체에 대해 이야기해 보겠습니다.

File 객체는 사용자가 요소에서 파일을 선택한 후 반환되는 FileList 객체이거나 드래그 앤 드롭 작업으로 생성된 DataTransfer 객체일 수 있습니다. .

은 다음과 같습니다.

1 // 입력: 파일의 파일 객체

2 document.querySelector("input [type=file]").files; // return FileList

3

4 // 드롭 이벤트의 파일 객체

5 elem .ondrop = function (e) {

6 e.preventDefault();

7 return e.dataTransfer.files; // return FileList

8 };

은 모두 FileList 객체로 반환됩니다. 이 FileList 객체는 NodeList와 유사합니다. 길이 속성이 있지만 배열이 아닙니다.

다음은 Chrome 콘솔에서 인쇄한 FileList 개체입니다.

파일 보기 다시 개체가 갖는 속성은 무엇입니까?

이러한 속성이 무엇을 의미하는지에 대해 말도 안되는 이야기는 하지 않겠습니다. 그러나 File 객체는 Blob 객체에서 상속된다는 점을 알 수 있습니다. Blob 객체가 무엇인지에 대해서는 나중에 언급하겠습니다.

처음에는 File객체와 함께 사용된다고 FileReader 객체에 대해서도 언급했습니다.

FileReader 개체를 사용하면 웹 애플리케이션이 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 비동기적으로 읽을 수 있습니다. File 개체 또는 Blob 개체를 사용할 수 있습니다. 읽어올 내용을 지정합니다.

구체적인 사용 방법은 다음 코드를 살펴보겠습니다.

1 // FileReader 객체 생성

2 var reader = new FileReader();

3

4 // 로드 바인딩 이벤트

5 reader.onload = function(e) {

6 console.log(e.target.result);

7 }

8

9 // 파일 객체 데이터 읽기

10 reader.readAsDataURL(document.querySelector("input[type=file]").files[0]);

FileReader 객체가 통과하는 경우 readAsDataURL이 데이터를 성공적으로 읽은 후 로드 이벤트가 트리거됩니다. 대상의 결과 속성 값은

물론 FileReader 개체에는 readAsDataURL이라는 메서드 하나만 있는 것은 아닙니다.

1 /**

2 * 읽기 작업을 중단합니다. 반환 시 ReadyState 속성의 값은 DONE입니다.

3 */

4 reader.abort();

5

6

7 /**

8 * 지정된 Blob 객체 또는 File 객체의 내용 읽기를 시작합니다.

9 * 읽기 작업이 완료되면 onloadend 이벤트가 발생하면 ReadyState 속성의 값이 DONE이 됩니다. 핸들러가 설정되어 있으면 호출하세요.

10 * 동시에 결과 속성에는 읽은 파일의 내용을 나타내는 URL 형식의 data: 문자열이 포함됩니다.

11*/

12 reader.readAsDataURL(파일);

13

14

15 /**

16 * 위와 동일하며 결과 속성에는 읽은 파일 내용을 나타내는 문자열이 포함됩니다.

17 * 인코딩은 선택 사항이며 유형은 반환된 데이터의 위치를 ​​나타내는 문자열입니다. 사용되는 인코딩은 지정되지 않은 경우 기본값은 UTF-8입니다.

18*/

19 reader.readAsText(파일[, 인코딩]);

20

21

22 /**

23 * 위와 마찬가지로 결과 속성에는 읽기 파일의 내용을 나타내는 ArrayBuffer 객체가 포함됩니다.

24*/

25 reader.readAsArrayBuffer(파일)

26

27

28 /* *

29 * 위와 동일하게 결과 속성에는 읽은 파일의 원본 바이너리 데이터가 포함됩니다.

30*/

31 reader.readAsBinaryString(file);

이제 base64가 생겼습니다. 파일을 삭제하면 작업하는 것이 훨씬 더 편리해집니다.

예를 들어, base64 문자열을 서버에 직접 게시할 수 있습니다.

1 var reader = new FileReader();

2

3 reader.onload = function(e) {

4 var xhr = new XMLHttpRequest(),

5 fromData = new FormData();

6

7 fromData.append("base64" , e.target.result);

8 xhr.open("post",url, true);

9 xhr.send(fromData);

10 }

11

12 reader.readAsDataURL(document.querySelector("input[type=file]").files[0]);

뭔가 잘못되었다고 느끼나요?

이제 FormData를 사용하고 있으니 base64로 변환해 보는 것은 어떨까요?

base64로 변환한 후 Canvas에 그린 후 편집이 가능하다는 점이 가장 큰 장점!

클라이언트 측에서는 크롭, 그래피티 등을 합니다. 편집 후 Canvas 객체의 toDataURL 메소드를 사용하여 편집된 이미지의 base64 데이터를 출력합니다.

여기에서는 구현에 대해 자세히 설명하지 않겠습니다.

HTML5 파일 양식 요소가 제공하는 새로운 지원을 살펴보겠습니다.

1

2

accept 속성을 사용하여 사용자가 업로드할 수 있는 파일 유형을 제한할 수 있습니다. 이 속성은 iOS 및 OSX에서 잘 지원됩니다.

또한 다중 속성이 있어 여러 파일을 선택할 수 있습니다. FormData 개체와 결합된 이 속성을 추가한 후 일괄 업로드를 수행할 수 있습니다.

1 (함수 (W, D) {

2 var fileForm = document.getElementById("file_form"),

3 fileImage = document.getElementById("file_image");

4

5 function testAjax(files, i) {

6 if (i

7                                                             데이터 = 새 FormData();

12

13시간 .onload = 함수 () {

14 );

16 };

17 data.append("file_image", files[i]);

18 xhr.open("post", "test/demo2.php", true );

19 xhr.send(data);

20 }

21

22 fileForm.addEventListener("submit ", 함수 (e) {

23 e.preventDefault();

24 var files = fileImage.files;

25

26 testAjax( files, --files. length);

27 }, false);

28

29 })(창, 문서);