이미지 업로드는 일반적인 기능이며 이미지 미리보기는 업로드 기능에서 필수적 인 하위 기능입니다. 그 전에 입력 [type = file] 요소의 Onchange 이벤트를 구독하는 데 사용했습니다. 경로가 변경되면 이미지가 서버에 업로드 된 다음 이미지 경로가 얻어지고 값이 IMG 요소에 할당됩니다. 비동기 파일 제출 솔루션에 관계없이 서버 측에서 임시 미리보기 이미지를 정리하여 워크로드가 증가했습니다.
실수로 MDN의 Pure Front-End Image Preview에 대한 관련 정보를 찾은 다음이를 분류하여 향후 참조를 위해 기록했습니다.
1. 준비 1 ─헤 필레더
Filereader는 Blob 및 파일 유형의 데이터를 읽기위한 HTML5의 새로운 기능입니다. 특정 사용량은 다음과 같습니다.
(1). 건축 방법
var fr = new Filereader ();
(2). 속성
ReadyState : 유형은 서명되지 않았으며, FilEReader 인스턴스의 현재 상태 (빈 —0, 아직로드되지 않았으며,로드 —1, 데이터로드; 2, 2, 모든 읽기 요청이 완료되었습니다), 읽기 전용.
결과 : 파일 내용은 읽기 전용입니다.
오류 : 유형이 domerror이며 파일을 읽을 때 발생하는 오류가 표시됩니다.
(3). 방법
Abort () : 읽기 작업을 중단하고 ReadyState를 완료하도록 설정하십시오. 읽기 작업이 수행되지 않으면이 메소드를 호출하면 dom_file_abort_err 예외가 발생합니다.
readasArrayBuffer (Blob Blob) : 데이터 읽기, 결과 속성은 Arraybuffer 유형으로 설정됩니다.
readastext (blob blob [, encoding = 'utf-8']) : 데이터 읽기, 결과 속성은 문자열 유형으로 설정됩니다.
readAsbinaryString (Blob Blob) : 데이터 읽기, 결과 속성은 원래 이진 데이터로 설정됩니다.
readasdataurl (blob blob) : 데이터 읽기, 결과 속성은 데이터 URI 체계 양식으로 설정됩니다 (자세한 내용은 "JS Magic Hall : Data URI Scheme 소개"를 방문하십시오).
(4). 이벤트
onload : 데이터를 성공적으로 읽은 후 트리거되었습니다
ONEERROR : 데이터를 읽을 때 예외가 발생하면 트리거되었습니다.
OnloadStart : 데이터를 읽기 전에 트리거되었습니다
onloadend : 데이터를 읽은 후 트리거, Onload 또는 OnError 후 트리거
ONABORT : 읽기를 중단 한 후 트리거되었습니다
onprogress : 읽기 중에 주기적으로 트리거되었습니다
(5). 브라우저 지원
FF3.6+, Chrome7+, IE10+
2. 준비 2 ─헤링 2 ─캠 DXIMAGETRANSFORM.MICROSOFT.ALPHAIMAGELOADER 필터
(1). 기능 : 주요 기능은 그림을 투명하게 처리하는 것입니다 (IE5.5 ~ 6은 투명한 PNG를 지원하지 않습니다)
(2). 스타일로 사용하는 방법
#preview {필터 : progid : dximagetransform.microsoft.alphaimageloader (sizateMethod = scale, src = "dummy.png");}(3). JS에서 사용하는 방법
var preview = document.getElementById ( 'preview'); preview.style.filter = preview.currentStyle.filter + "; progid : dximagetransform.microsoft.alphaimageloader (SizateMethod = scale, src = 'dummy.png')"; preview.filters.item ( "dximagetransform.microsoft.alphaimageloader"). src = "dummy1.png";
(4). 속성
활성화 : 선택 사항, 필터가 활성화되어 있는지 여부를 설정합니다. 값 범위 true (기본값), false
사이징 메드 : 옵션, 컨테이너 경계 내에 필터 작용 이미지가 표시되는 방법, 값 범위 작물 (컨테이너 크기에 맞게 이미지를 자르기), 이미지 (기본값, 이미지 크기에 맞게 컨테이너 크기를 늘리거나 줄이기), 스케일 (컨테이너 크기에 맞게 이미지 스케일링)
SRC : 필수, 절대 또는 상대 URL을 사용하여 배경 이미지를 가리 킵니다. URL이 사용자 컴퓨터의 로컬 주소 인 경우 IMG 요소의 SRC가 사용자 컴퓨터의 로컬 주소 인 경우 로컬 파일 시스템에 액세스 할 수없는 예외가 발생합니다.
구현
다음으로 Filereader의 readasdataurl을 사용하여 이미지 미리보기 기능을 구현하기위한 데이터 URI 체계를 얻고 필터 dximagetransform.microsoft.alphaimageloader를 사용하여 다운 그레이드합니다.
HTML 조각 :
<스타일 유형 = "text/css">#preview {너비 : 100px; 높이 : 100px;} </style> <!-[lte IE 9]> <Style type = "text/css"> #preview {필터 : progid : dximagetransform.microsoft.alphaimageloader (sizingmethod = scale); } </style> <! [endif]-> <입력 유형 = "파일"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은 보안을 고려 했으므로 입력 [type = file] 요소에서 값, Outerhtml 및 getAttribute를 통해 사용자의 선택된 파일의 실제 주소를 얻는 것은 불가능하며 c :/ fake path/ file 이름 만 얻을 수 있습니다. 따라서 IE11이 사용되지만 텍스트 모드가 10 미만으로 설정되면 이미지 미리보기를 달성 할 수있는 방법이 없습니다.
솔루션 1 ── HEAD 태그 아래 에이 문장을 추가하십시오. <meta http-equiv = "x-ua 호환"내용 = "ie = edge">. 이것은 현재 가장 높은 버전의 현재 IE를 사용하여 기본적으로 웹 페이지를 구문 분석하고 렌더링 할 수 있음을 알려줍니다.
솔루션 2 ── optor 특정 작업은 다음과 같습니다.
// fileel이 [type = file] empliceeleel.select (); var filepath = document.select.createrAngeCollection () [0] .htmlText라고 가정합니다.
5. 보충 : filereader 대신 Window.url.createobjecturl을 사용하십시오
Filereader의 readasdataurl 방법을 통해 얻은 데이터 URI 체계는 매우 긴 Base64 문자열을 생성합니다. 이미지가 더 크면 문자열이 더 길어집니다. 페이지 리플 로우가 발생하면 성능 저하가 발생합니다. 솔루션은 다음과 같습니다.
1. 미리보기 IMG 태그는 절대 포지셔닝을 사용하여 문서의 다른 요소와 관련이 없으며 반사시 성능에 영향을 미치지 않습니다.
2. Window.url.CreateObjecturl (Blob Blob)을 사용하여 데이터 링크를 생성합니다.
var createobjecturl = function (blob) {return swooind [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);};위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.