js 의 Blob 형식

js 의 Blob 형식
불 시의 수요 에 대비 하여 간단하게 기록 하 세 요. 큰 사람 은 뿌리 지 마 세 요. 감사합니다!（づ￣3￣）づ╭❤～
Blob 는 js 의 대상 유형 으로 바 이 너 리 데 이 터 를 액세스 하 는 데 사 용 됩 니 다.File 대상 과 유사 하 며, File 은 Blob 에서 계승 합 니 다.
주요 용도
가장 주요 한 용 도 는 Blob 대상 을 구축 한 다음 에 대상 Url 을 만 든 다음 에 탭 에 값 을 부여 하거나 xhr XMLHttpRequest 를 사용 하여 다운로드 하 는 것 이다.
편 을 나 누 어 파일 을 업로드 하 다.
여기 서 주로 File 대상 을 말 하 는데 Blob 에서 계승 한 것 이기 때문에 Blob 대상 의 특성 이 라 고 할 수 있 습 니 다.
업로드 예: (네트워크 에서 유래) slice 속성 을 사용 하여 필름 을 나 누 어 업로드 합 니 다.

function uploadFile(file) {
  var chunkSize = 1024 * 1024; //  1M  
  var totalSize = file.size;
  var chunkQuantity = Math.ceil(totalSize/chunkSize); //    
  var offset = 0; //   

  var reader = new FileReader();
  reader.onload = function(e) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url);
    xhr.overrideMimeType("application/octet-stream");
    
    xhr.onreadystatechange = function() {
      if(xhr.readyState === 4 && xhr.status ===200) {
        ++offset;
        if(offset === chunkQuantity) {
          alert("    ");
        } else if(offset === chunkQuantity-1) {
          blob = file.slice(offset*chunkSize, totalSize);
          reader.readAsBinaryString(blob);
        } else {
          blob = file.slice(offset*chunkSize, (offset+1)*chunkSize);
          reader.readAsBinaryString(blob);
        }
      }else {
        alert("    ");
      }
    }

    if(xhr.sendAsBinary) {
      xhr.sendAsBinary(e.target.result);
    } else {
      xhr.send(e.target.result);
    }
  }
  var blob = file.slice(0, chunkSize);
  reader.readAsBinaryString(blob);
}

데이터 다운로드
Blob 대상 을 만 드 는 url 을 통 해 사용자 정의 데 이 터 를 다운로드 할 수 있 습 니 다.
메모: Blob 대상 을 만 들 때 파일 형식 을 지정 하 는 것 을 권장 합 니 다.
주요 구현 방식 은 데 이 터 를 만 드 는 Blob 대상 을 통 해 Url 을 만 든 다음 에 해당 하 는 탭 에 값 을 부여 하고 해당 하 는 url 을 제거 하 는 것 입 니 다.
구체 적 인 수요 에 따라

탭 에 값 을 부여 하고 클릭 조작 을 통 해 파일 데 이 터 를 다운로드 할 수 있 습 니 다.

태그 에 값 을 부여 하면 그림 데 이 터 를 추가 할 수 있 습 니 다.

예 를 들 어 아래 의 그림 데 이 터 를 a 로 변환 하고 img 에 게 그림 을 불 러 오 는 목적 을 달성 합 니 다.
이미지 데 이 터 를 업로드 할 때 Blob Url 대상 이 므 로 대상 URL 을 직접 만 들 수 있 습 니 다.


<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    head>
    <body>
        <input type="file" accept="image/*" onchange="handleFile(this)">
        <br/>
        <img style="width:100%;height:100%;" src="" alt="">

        <script>
            function handleFile(e) {
                console.log(e.files);
                var file = e.files[0];
                var blob = URL.createObjectURL(file);
                var img = document.getElementsByTagName("img")[0];
                img.src = blob;
                img.onload = function (e) {
                    URL.revokeObjectURL(this.src); //  createObjectURL     
                }
            }
        script>
    body>
html>

다음은 파일 을 만 들 기 img 를 통 해 다운로드 하 는 목적 을 달성 하 는 것 이다.

function createDownloadFile() {
      let content = "Blob Data";
      let blob = new Blob([content], "text/plain");
      let link = document.getElementsByTagName('a')[0];
      link.download = "file";
      link.href = URL.createObjectURL(blob);
    }

원본 데이터 가 져 오기

let blobUrl = URL.createObjectURL(new Blob(['Test'], {type: 'text/plain'}));
let xhr = new XMLHttpRequest();
//    xhr.responseType = 'blob',     Blob  ，     ；
//xhr.responseType = 'blob';
xhr.onload = function() {alert(xhr.responseText);}
xhr.open('get', blobUrl);
xhr.send();

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this

18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

js 의 Blob 형식

좋은 웹페이지 즐겨찾기