javascript HTML5 파일 업로드 FileReader API_javascript 팁

파일 업로드 기능은 이제 점점 일반화되고 있습니다. Youku Video, Weibo 등 모든 소셜 네트워킹 사이트는 사진 및 비디오 업로드와 같은 기능을 제공합니다. 그러나 과거에 웹 프로그래머들은 HTML 양식을 사용하여 파일을 업로드하는 것이 매우 번거롭다는 것을 알고 있었습니다. 특히 사용자가 업로드한 파일의 일부 속성을 알고 싶다면 업로드가 완료될 때까지 기다려야 합니다.

알 수 없는 것을 서버에 업로드하면 보안 문제가 발생할 수도 있고, 너무 커서 허용 크기를 초과하여 공간을 낭비할 수도 있습니다. 이제 WEB 기술은 발전하고 있으며 HTML5는 많은 좋은 것들을 가져왔습니다. 이 FileReader API를 사용하면 사용자가 업로드하기 전에 업로드된 파일의 일부 기본 속성을 얻을 수 있습니다.

HTML 코드

이 FileReader API는 File API와 동일하게 작동하며 input[type="file"] 요소를 사용해야 합니다.

<-- 一个能上传多媒体文件的表单 -->
<input type="file" id="upload-file" multiple />

<-- 显示图片的地方 -->
<div id="destination"></div>

파일 API 글에는 주소, 볼륨, 크기, 파일 형식 등 읽을 수 있는 파일에 대한 자세한 정보가 나와 있습니다.

자바스크립트

이 예에서는 입력 양식 필드를 사용하여 사진을 업로드합니다. 사용자가 자신의 컴퓨터에서 사진을 선택하면 해당 사진이 페이지에 표시됩니다.

document.getElementById('upload-file').addEventListener('change', function() {
 var file;
 var destination = document.getElementById('destination');
 destination.innerHTML = '';

 // 循环用户多选的文件
 for(var x = 0, xlen = this.files.length; x < xlen; x++) {
 file = this.files[x];
 if(file.type.indexOf('image') != -1) { // 非常简单的交验

  var reader = new FileReader();

  reader.onload = function(e) {
  var img = new Image();
  img.src = e.target.result; // 显示图片的地方

  destination.appendChild(img);
  };
  
  reader.readAsDataURL(file);
 }
 }
});

이 예에서는 FileReader의 readAsDataURL 메서드를 사용하여 이미지 콘텐츠를 base64로 인코딩된 문자열로 변환한 다음 이미지의 데이터 URI를 사용하여 표시합니다. 다른 FileReader 읽기 방법으로는 readAsText, readAsArrayBuffer 및 readAsBinaryString 등이 있습니다.

이 FileReader API를 사용하면 사용자가 먼저 서버에 파일을 업로드하는 것을 방지하고 브라우저 클라이언트에서 해당 파일을 작동할 수 있습니다. 서버에 업로드하기 전 이러한 전처리가 필요합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.