HTML5의 새로운 기능: 파일 및 이진 데이터 작업

역사적으로 JavaScript는 바이너리 데이터를 처리할 수 없습니다. 처리해야 하는 경우 귀하만 charCodeAt() 메서드를 사용하여 텍스트 인코딩을 바이트 단위로 이진 데이터로 변환할 수 있습니다. 또 다른 방법은 이진 데이터를 Base64 인코딩으로 변환한 다음 처리하는 것입니다. 이 두 가지 방법은 속도가 느릴 뿐만 아니라 오류가 발생하기 쉽습니다. 바이너리 데이터를 직접 조작할 수 있는 객체가 도입되었습니다.

Bolb 객체는 이를 기반으로 일련의 관련 API가 파생됩니다. 🎜>, 파일을 조작하는데 사용

• File 객체: 파일 형태로 존재하는 바이너리 데이터 처리, 즉 로컬 파일을 조작하는 역할

• FileList 객체: File 객체의 웹 형식

  인터페이스

• FileReader 객체: 바이너리 데이터를 메모리로 읽어오는 역할

• URL 객체: 바이너리 데이터에 대한 URL을 생성하는 데 사용됩니다

1 Blob 객체

Blob(Binary Large

객체) 객체는 바이너리 데이터를 나타내며 일련의 작업 인터페이스를 제공합니다. 바이너리 데이터(예: File 객체)를 작동하기 위한 다른 API는 Blob 객체를 기반으로 하며 는 해당 속성을 ​​상속합니다. Blob 객체를 생성하는 방법에는 두 가지가 있습니다. 하나는 Blob 생성자를 사용하는 것이고, 다른 하나는 기존 Blob 객체

(1) Blob 생성자는 두 개의 매개변수를 허용합니다. 첫 번째 매개변수는 실제 데이터를 포함하는

배열이고 두 번째 매개변수는 데이터 유형입니다.

var htmlParts = [&#39;<a id="a"><b id="b">hey!<\/b><\/a>&#39;];
var myBlob = new Blob(htmlParts, {&#39;type&#39;: &#39;text\/xml&#39;});

다음은 Blob 개체를 사용하여 다운로드 가능한 파일을 생성하는 예입니다.

var blob = new Blob(['Hello World']);var a = document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.donwload = 'hello-world.txt';
a.textContent = 'Download Hello World';

body.appendChild(a);

위 코드를 클릭하면 하이퍼링크가 생성됩니다. hello-world.txt 텍스트 파일을 다운로드합니다. 파일 내용은 "Hello World"입니다. (2) Blob 개체의 슬라이스 메서드는 바이너리 데이터를 바이트로 나누고 새로운 Blob 개체를 반환합니다. >다음은 XMLHttpRequest 객체를 사용하여 대용량 파일을 분할

하고 업로드하는 예입니다

var newBlob = oldBlob.slice(startingByte, endindByte);

(3) Blob 객체에는 두 가지 읽기 전용 속성이 있습니다.

size: 바이너리 데이터의 크기(바이트)입니다.

유형: 바이너리 데이터의 MIME 유형, 모두 소문자, 유형을 알 수 없는 경우 값은 비어 있습니다

문자열

.

• Ajax 작업에서는 xhr.responseType을 blob으로 설정하면 바이너리 데이터를 받습니다.
• 2. FileList 개체

  FileList 개체는 양식의 File 컨트롤

  용입니다. 사용자가 파일 컨트롤을 통해 파일을 선택하면 이 컨트롤의 파일 속성 값은 FileList 개체입니다. 이는 배열과 구조가 유사하며 사용자가 선택한 여러 파일을 포함합니다.

function upload(blobOrFile) {  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };
  xhr.send(blobOrFile);
}

document.querySelector('input[type="file"]').addEventListener('change', function(e) {  
var blob = this.files[0];  
var BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
  var SIZE = blob.size;  var start = 0;  
  var end = BYTES_PER_CHUNK;  while(start < SIZE) {
    upload(blob.slice(start, end));

    start = end;
    end = start + BYTES_PER_CHUNK;
  }
}, false);

사용자가 파일을 선택하면 파일을 읽을 수 있습니다.

<input type="file" id="input" onchange="console.log(this.files.length)" multiple />

FileList 객체는 드래그 앤 드롭으로도 얻을 수 있습니다.

var selected_file = document.getElementById('input').files[0];

위 코드의 handlerFileSelect는 드래그 앤 드롭 이벤트의

콜백 함수

입니다. 해당 매개변수 evt는 이벤트입니다. 객체 및 매개변수의 dataTransfer .files 속성은 드래그 앤 드롭된 파일을 포함하는 FileList 객체입니다.

3. File 객체

File 객체는 FileList 객체의 구성원이며 파일 이름, 마지막 수정 시간, 파일 크기 등 파일에 대한 일부 메타 정보를 포함합니다. 그리고 파일 유형. 해당 속성 값은 다음과 같습니다. name: 파일 이름, 이 속성은 읽기 전용입니다.

size: 파일 크기, in bytes, 속성 읽기 전용

• type: 파일의 MIME 유형입니다. 유형을 구별할 수 없는 경우 이 속성은 읽기 전용입니다.

• lastModifiedDate: 파일의 마지막 수정 시간입니다. 이 속성은 읽기 전용입니다.

var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('drop', handleFileSelect, false);
function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();    
    var files = evt.dataTransfer.files; // FileList object.

    // ...}

• 4. FileReader 객체
  FileReader 객체는
파일의 실제 내용을 읽는 데 사용되는 매개변수로 File 객체 또는 Blob 객체를 받습니다
• , 즉 파일 내용을 메모리로 읽습니다. 다양한 유형의 파일에 대해 FileReader는 다양한 방법을 사용하여 읽습니다.

  • FileReader.readAsBinaryString(Blob|File) ：读取结果为二进制字符串，每个字节包含一个0到255之间的整数。

  • FileReader.readAsText(Blob|File, opt_encoding) ：读取结果是一个文本字符串。默认情况下，文本编码格式是'UTF-8'，可以通过可选的格式参数，指定其他编码格式的文本。

  • FileReader.readAsDataURL(Blob|File) ： 读取结果是一个基于Base64编码的 data-uri 对象。

  • FileReader.readAsArrayBuffer(Blob|File) ：读取结果是一个 ArrayBuffer 对象。

  FileReader采用异步方式读取文件，可以为一系列事件指定回调函数。

  • onabort：读取中断或调用reader.abort()方法时触发。

  • onerror：读取出错时触发。

  • onload：读取成功后触发。

  • onloadend：读取完成后触发，不管是否成功。触发顺序排在 onload 或 onerror 后面。

  • onloadstart：读取将要开始时触发。

  • onprogress：读取过程中周期性触发。

  下面的代码是如何展示文本文件的内容。

  var reader = new FileReader();
  
  reader.onload = function(e){
         console.log(e.target.result);
  }
  
  reader.readAsText(blob);

  onload事件的回调函数接受一个事件对象，该对象的target.result就是文件的内容。

  下面是一个使用readAsDataURL方法，为img元素添加src属性的例子。

  var reader = new FileReader();
  
  reader.onload = function(e) {
      document.createElement('img').src = e.target.result;
  
  };
  
  reader.readAsDataURL(f);

  下面是一个onerror事件回调函数的例子。

  var reader = new FileReader();
  reader.onerror = errorHandler;
  function errorHandler(evt) {    
  switch(evt.target.error.code) {      
  case evt.target.error.NOT_FOUND_ERR:
          alert('File Not Found!');        
          break;      
          case evt.target.error.NOT_READABLE_ERR:
          alert('File is not readable');        
          break;      
          case evt.target.error.ABORT_ERR:        
          break;      
          default:
          alert('An error occurred reading this file.');
      };
  }

  下面是一个onprogress事件回调函数的例子，主要用来显示读取进度。

  var reader = new FileReader();
  reader.onprogress = updateProgress;function updateProgress(evt) {    
  if (evt.lengthComputable) {      
  var percentLoaded = Math.round((evt.loaded / evt.totalEric Bidelman) * 100);      
        var progress = document.querySelector('.percent');      
        if (percentLoaded < 100) {
          progress.style.width = percentLoaded + &#39;%&#39;;
          progress.textContent = percentLoaded + &#39;%&#39;;
        }
      }
  }

  读取大文件的时候，可以利用Blob对象的slice方法，将大文件分成小段，逐一读取，这样可以加快处理速度。

  5、URL对象

  URL对象用于生成指向File对象或Blob对象的URL。 

  var objecturl =  window.URL.createObjectURL(blob);

  上面的代码会对二进制数据生成一个URL，类似于“blob:http%3A//test.com/666e6730-f45c-47c1-8012-ccc706f17191”。这个URL可以放置于任何通常可以放置URL的地方，比如img标签的src属性。需要注意的是，即使是同样的二进制数据，每调用一次URL.createObjectURL方法，就会得到一个不一样的URL。

  这个URL的存在时间，等同于网页的存在时间，一旦网页刷新或卸载，这个URL就失效。除此之外，也可以手动调用URL.revokeObjectURL方法，使URL失效。

  window.URL.revokeObjectURL(objectURL);

  下面是一个利用URL对象，在网页插入图片的例子。

  var img = document.createElement("img");
  
  img.src = window.URL.createObjectURL(files[0]);
  
  img.height = 60;
  
  img.onload = function(e) {
      window.URL.revokeObjectURL(this.src);
  }
  
  body.appendChild(img);var info = document.createElement("span");
  
  info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
  
  body.appendChild(info);

  还有一个本机视频预览的例子。

  var video = document.getElementById('video');var obj_url = window.URL.createObjectURL(blob);
  video.src = obj_url;
  video.play()
  window.URL.revokeObjectURL(obj_url);

위 내용은 HTML5의 새로운 기능: 파일 및 이진 데이터 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!