JavaSctit 은 FileReader 와 필 터 를 이용 하여 그림 미리 보기 기능 을 업로드 합 니 다.

FileReader 대상 은 웹 프로그램 이 사용자 컴퓨터 에 저 장 된 파일(또는 원본 데이터 버퍼)의 내용 을 비동기 로 읽 을 수 있 도록 합 니 다.File 또는 Blob 대상 이 읽 을 파일 이나 데 이 터 를 지정 합 니 다.
1.FileReader 인터페이스 방법
FileReader 인 터 페 이 스 는 네 가지 방법 이 있 는데,그 중 세 가 지 는 파일 을 읽 는 데 쓰 이 고,다른 하 나 는 읽 기 를 중단 하 는 데 쓰 인 다.읽 기 에 성공 하 든 실패 하 든 방법 은 읽 기 결 과 를 되 돌려 주지 않 습 니 다.이 결 과 는 result 속성 에 저 장 됩 니 다.

2,FileReader 인터페이스 이벤트
FileReader 인 터 페 이 스 는 파일 을 읽 을 때의 상 태 를 캡 처 하 는 완전한 이벤트 모델 을 포함 하고 있 습 니 다.

중점 소개:readAsDataURL
지정 한 Blob 대상 이나 File 대상 의 내용 을 읽 기 시작 합 니 다.읽 기 작업 이 완료 되면 ready State 속성의 값 은 DONE 이 됩 니 다.onloadend 이벤트 처리 프로그램 이 설정 되 어 있 으 면 호출 됩 니 다.또한 result 속성 에는 읽 은 파일 의 내용 을 표시 하 는 data:URL 형식의 문자열 이 포함 되 어 있 습 니 다.
예 를 들 어 그림 의 로 컬 미리 보 기 를 실현 할 수 있 습 니 다.
IE 10 이하 버 전 은 FileReader()구조 함 수 를 지원 하지 않 습 니 다.다만 필 터 를 이용 하여 이전 버 전의 IE:IE 를 호 환 하 는 그림 로 컬 미리 보 기 를 호 환 할 수 있 습 니 다.


<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
var loadImageFile = (function () {
  if (window.FileReader) {
    var  oPreviewImg = null, oFReader = new window.FileReader(),
      rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
    oFReader.onload = function (oFREvent) {
      if (!oPreviewImg) {
        var newPreview = document.getElementById("imagePreview");
        oPreviewImg = new Image();
        oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";
        oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";
        newPreview.appendChild(oPreviewImg);
      }
      oPreviewImg.src = oFREvent.target.result;
    };
    return function () {
      var aFiles = document.getElementById("imageInput").files;
      if (aFiles.length === 0) { return; }
      if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }
      oFReader.readAsDataURL(aFiles[0]);
    }
  }
  if (navigator.appName === "Microsoft Internet Explorer") {
    return function () {
      document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;
    }
  }
})();
</script>
<style type="text/css">
#imagePreview {
  width: 160px;
  height: 120px;
  float: right;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
</head>
<body>
<div id="imagePreview"></div>
<form name="uploadForm">
<p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
<input type="submit" value="Send" /></p>
</form>
</body>
</html>

IE7 에서 의 효 과 를 보 세 요.

구 글 의 효과

좋아,다 완벽 해.구체 적 인 참조 링크:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
총결산
위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 JavaSctit 이 FileReader 와 필 터 를 이용 하여 사진 미리 보기 기능 을 올 리 는 것 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

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

현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.

JavaSctit 은 FileReader 와 필 터 를 이용 하여 그림 미리 보기 기능 을 업로드 합 니 다.

좋은 웹페이지 즐겨찾기