JavaScript File API 파일 업로드 Preview_javascript 기술

브라우저 기반 애플리케이션의 경우 로컬 파일에 액세스하는 것은 골치 아픈 일입니다. 일반적으로 우리가 할 수 있는 일은 태그를 사용하여 파일을 업로드하는 것뿐입니다. . 구현 프로세스는 다음과 같습니다. 파일을 선택할 때 value 속성은 사용자가 지정한 파일 이름을 저장합니다. 양식이 제출되면 브라우저는 파일 이름 대신 선택한 파일의 내용을 서버에 보냅니다. 그런 다음 서버에서 반환된 주소를 가져와 미리 봅니다.

하지만 어느 날 사진을 업로드하고 싶은데, 사진을 업로드한 후 미리보기를 하고 다른 사진을 변경하고 싶다면 먼저 서버에 업로드한 다음 미리보기를 해야 합니다. 네트워크가 상대적으로 느리면 이는 정말 번거로운 일입니다.

따라서 때로는 서버에 업로드하기 전에 미리보기가 필요한 경우가 있습니다. 특히 Sina Weibo의 아바타 교체와 같은 자르기 기능이 있는 경우에는 더욱 그렇습니다. 그러나 현재 우리가 할 수 있는 것은 플러그인 개발을 사용하거나 플래시를 사용하는 것뿐입니다. 브라우저마다 기술 구현이 다르기 때문에 프로그램이 여러 브라우저를 지원하도록 하려면 프로그램이 매우 복잡해지고 어려워질 것입니다. 유지하다. 다행스럽게도 이제 파일 API가 있습니다.

변경 이벤트를 청취함으로써 사용자가 선택한 파일을 알 수 있고, 파일 개체를 포함할 파일 컬렉션을 추가할 수 있으며, 각 파일 개체는 파일에 해당합니다. 그리고 모두 이름, 크기, 유형, lastModifiedDate와 같은 읽기 전용 속성을 갖습니다.

을 예로 들어 onchange를 모니터링하고 해당 파일 객체를 인쇄합니다.

이를 통해 사용자가 선택한 파일 형식, 파일 이름, 파일 크기 등에 대한 일부 정보를 알 수 있습니다. 따라서 선택한 문서가 일부 요구 사항을 충족하는지 쉽게 확인할 수 있습니다.

또한 File API는 파일의 데이터를 읽을 수 있는 FileReader 유형도 제공합니다.

FileReader 유형은 XMLHttpRequest와 유사한 비동기 파일 읽기 메커니즘을 구현하지만 원격 서버가 아닌 파일 시스템을 읽습니다. 그리고 다양한 읽기 방법을 제공합니다:

• readAsText(file,encoding): 파일을 일반 텍스트 형식으로 읽고 읽은 텍스트를 결과 속성에 저장합니다. 두 번째 매개변수는 인코딩 유형을 지정하는 데 사용되며 선택사항입니다.
• readAsDataURL(file): 읽은 파일은 결과 속성에 데이터 URL 형식으로 저장됩니다.
• readAsBinaryString(file): 파일을 읽고 결과 속성에 문자열을 저장합니다.
• readAsArrayBuffer(file): 파일을 읽고 결과 속성에 파일 내용이 포함된 ArrayBuffer를 저장합니다.

위 방법을 통해 동일한 로컬 이미지를 읽어오고, 다음과 같이 결과 속성에 저장된 정보를 출력하여 비교합니다.

readAsText(파일,인코딩):

readAsDataURL(파일):

위의 비교를 통해 이러한 파일 읽기 방법은 파일 데이터의 유연한 처리에 큰 편의성을 제공한다는 것을 알았습니다. 예를 들어, 이미지 파일을 읽어 데이터 URL로 저장하면 업로드 전 미리보기 기능으로 활용할 수 있습니다.

읽기 프로세스가 비동기식이므로 FileReader에는 여러 상황을 처리하기 위한 여러 이벤트가 있습니다. 진행(새 데이터를 읽었는지 여부), erro(오류가 발생했는지 여부), 로드(전체 파일을 읽었는지 여부) 문서).

여러 가지 이유로 파일을 읽을 수 없는 경우 오류 이벤트가 발생합니다. 오류 이벤트가 발생하면 FileReader의 오류 속성에 개체에 속성 코드(오류 코드)가 저장됩니다.

업로드 미리보기에 FileReader를 사용하는 예:

HTML:

<label class="item_label">上传照片：
 <span style="width: 100px; height: 100px;border:1px solid #ccc; display:inline-block"><img src="#" id="uploadPreview" style="width: 100%; height: 100%;"></span>
 <input type="file" name="file" id="postFile" style="width:74px;">
 <span id="error_text" style="display: none;">提示</span>
</label>
　　

자바스크립트:

document.getElementById('postFile').onchange = function() {
 var val = this.value;
 var upLoadType = '.jpg,.gif,.bmp,.png';//['.jpg','.gif','.bmp','.png']; //可上传的格式
 var fileExt = val.substr(val.lastIndexOf(".")).toLowerCase(); //从字符串中抽出最后一次出现.之后的字符，并且转换成小写
 var result = upLoadType.indexOf(fileExt); //查找后缀名是否符合条件，如果符合返回>=0，如果不符合则返回负数;
 _alertMsg = $('#error_text');
 var oFReader = new FileReader();
 if (this.files.length === 0) { return; }
 var oFile = this.files[0]; //如果只有一个文件则只需要访问这个FileList对象中的第一个元素.
  
 if (oFile.size / 1024 < 100) {
  _alertMsg.html("<font style='color:blue'>√</font>").show()
 };
 if (result < 0) {
  _alertMsg.html("请输入正确格式:" + upLoadType).show();
 } else{
  _alertMsg.html("<font style='color:blue'>√</font>").show();
 };
 
 oFReader.readAsDataURL(oFile); // 开始在后台进行读取操作。当图像文件的所有内容加载后,他们转换成一个data:URL,传递到onload回调函数中
 oFReader.onload = function (oFREvent) { //当读取操作成功完成时调用.
  document.getElementById("uploadPreview").src = oFREvent.target.result;
 };
};

효과 및 반환된 이미지 URL:

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