Node.js는 순수 프런트엔드 이미지 Preview_javascript 기술을 구현합니다.

이미지 업로드는 일반적인 기능이며, 이미지 미리보기는 업로드 기능의 필수 하위 기능입니다. 이전에는 input[type=file] 요소의 onchange 이벤트를 구독하고 경로가 변경되면 이미지를 서버에 업로드한 다음 이미지 경로를 가져와 img 요소에 할당했습니다. 비동기 파일 제출을 위한 솔루션에 관계없이 서버 측에서 임시 미리 보기 이미지를 정리하면 이미 작업량이 많이 증가했습니다.

MDN에서 순수 프론트엔드 이미지 미리보기 관련 정보를 우연히 발견하여 정리한 후 나중에 참고할 수 있도록 기록해 두었습니다.

1. 준비 1──FileReader　　　　　　　

FileReader는 Blob 및 파일 유형 데이터를 읽는 데 사용되는 HTML5의 새로운 기능입니다. 구체적인 사용법은 다음과 같습니다.

(1) 시공방법

var fr = new FileReader();
(2)속성

readyState: 유형은 unsigned short, FileReader 인스턴스의 현재 상태입니다. (EMPTY——0, 데이터가 로드되지 않았습니다. LOADING——1, 데이터가 로드 중입니다. DONE——2, 모든 읽기 요청이 완료되었습니다. 완료), 읽기 전용입니다.

결과: 읽기 파일 콘텐츠, 읽기 전용.

오류: 유형은 DOMError이며, 읽기 전용으로 파일을 읽을 때 발생한 오류를 나타냅니다.

(3) 방법

abort(): 읽기 작업을 중단하고 ReadyState를 DONE으로 설정합니다. 읽기 작업이 수행되지 않은 경우 이 메서드를 호출하면 DOM_FILE_ABORT_ERR 예외가 발생합니다.

readAsArrayBuffer(Blob blob): 데이터를 읽고 결과 속성이 ArrayBuffer 유형으로 설정됩니다

readAsText(Blob blob [, 인코딩='utf-8']): 데이터를 읽고 결과 속성이 문자열 유형으로 설정됩니다

readAsBinaryString(Blob blob): 데이터를 읽고 결과 속성이 원시 바이너리 데이터로 설정됩니다

readAsDataURL(Blob blob): 데이터를 읽고 결과 속성이 Data URI Scheme 형식으로 설정됩니다. (자세한 내용은 "JS Magic Hall: 데이터 URI Scheme 소개"를 참조하세요.)

(4).이벤트

onload: 데이터를 성공적으로 읽은 후 트리거됩니다

onerror: 데이터를 읽을 때 예외가 발생하면 트리거됩니다

onloadstart: 데이터를 읽기 전에 트리거됩니다

onloadend: 데이터를 읽은 후 트리거됨, onload 또는 onerror 이후 트리거됨

onabort: 읽기 중단 후 트리거됨

onprogress: 읽기 프로세스 중에 주기적으로 트리거됩니다

(5). 브라우저는

을 지원합니다.

FF3.6+, Chrome7+, IE10+

2. 준비 2──DXImageTransform.Microsoft.AlphaImageLoader 필터　　

(1) 기능: 주요 기능은 이미지를 투명하게 만드는 것입니다. (IE5.5~6은 투명 png를 지원하지 않습니다.)

(2) 스타일에 활용하는 방법

#preview{
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="dummy.png");
}

(3) JS에서 사용하는 방법

var preview = document.getElementById('preview');
preview.style.filter = preview.currentStyle.filter + ";progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='dummy.png')";
preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src="dummy1.png";

(4)속성

활성화됨: 선택 사항이며 필터 활성화 여부를 설정합니다. 값 범위 true(기본값), false

sizingMethod: 선택 사항, 컨테이너 경계 내에서 필터링된 이미지가 표시되는 방식, 값 범위 자르기(컨테이너 크기에 맞게 이미지 자르기), 이미지(기본값, 이미지에 맞게 컨테이너 크기 늘리거나 줄이기) 크기 설정 ), scale(컨테이너 크기에 맞게 이미지 크기 조정)

src: 필수, 절대 또는 상대 URL을 사용하여 배경 이미지를 가리킵니다. URL이 사용자 컴퓨터의 로컬 주소인 경우 유효하며, img 요소의 src가 사용자 컴퓨터의 로컬 주소인 경우 로컬 파일 시스템에 대한 접근을 허용하지 않는 예외가 발생합니다.

셋 , 구현 　　　　　　　　　　

다음으로, FileReader의 readAsDataURL을 사용하여 데이터 URI Scheme을 얻어 이미지 미리보기 기능을 구현하겠습니다. IE5.5~9에서는 다운그레이드 처리를 위해 DXImageTransform.Microsoft.AlphaImageLoader 필터를 사용합니다.

html 조각:

<style type="text/css">
#preview{
  width: 100px;
  height: 100px;
}
</style>
<!--[if lte IE 9]>
<style type="text/css">
  #preview{
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
  }
</style>
<![endif]-->

<input type="file" onchange="showPreview(this);"/>
<div id="preview">
</div>

js 조각:

var preview = function(el){
  var pv = document.getElementById("preview");
  // IE5.5~9使用滤镜
  if (pv.filters && typeof(pv.filters.item) === 'function'){
    pv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = el.value;
  }
  else{
    // 其他浏览器和IE10+（不支持滤镜）则使用FileReader
    var fr = new FileReader();
    fr.onload = function(evt){
      var pvImg = new Image();
      pvImg.style.width = pv.offsetWidth + 'px';
      pvImg.style.height = pv.offsetHeight + 'px';
      pvImg.src = evt.target.result;
      pv.removeChild(0);
      pv.appendChild(pvImg);
    };
    fr.readAsDataURL(el.files[0]);
  }
};

4. 함정

IE11의 보안 문제로 인해 사용자가 선택한 파일의 실제 주소는 input[type=file] 요소의 externalHTML 및 getAttribute 값을 통해 얻을 수 없습니다. C: fakepath의 파일 이름만 얻을 수 있습니다. . 따라서 IE11을 사용하는데 텍스트 모드가 10 이하로 설정되어 있으면 이미지 미리보기를 얻을 수 있는 방법이 없습니다.

해결책 1──헤드 태그 아래에 다음 문장을 추가합니다.

해결책 2── document.selection.createRangeColleciton()을 사용하여 실제 주소를 가져옵니다.

// 假设fileEl就是[type=file]元素
fileEl.select();
var filePath = document.selection.createRangeCollection()[0].htmlText; 

五、补充：使用window.URL.createObjectURL代替FileReader　　　　　　 

  通过FileReader的readAsDataURL方法获取的Data URI Scheme会生成一串很长的base64字符串，若图片较大那么字符串则更长，若页面出现reflow时则会导致性能下降。解决方案如下：

  1. 预览的img标签使用绝对定位，从而脱离正常文档流，那么就与文档的其他元素无关了，而reflow时则不会影响性能。

  2. 采用 window.URL.createObjectURL(Blob blob) 生成数据链接。

var createObjectURL = function(blob){
 return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
};

注意： window.URL.createObjectURL 生成的数据链接是独占内存的，因此若不时用时需要调用 window.URL.revokeObjectURL(DOMString objUrl) 来释放内存。在刷新页面时，也会自动释放内容。

var resolveObjectURL = function(blob){
 window[window.webkitURL ? 'webkitURL' : 'URL']['revokeObjectURL'](blob);
};

以上就是本文的全部内容，希望对大家的学习有所帮助。