JavaScript 는 이미지 로 컬 미리 보기 기능 을 실현 합 니 다[서버 에 업로드 하지 않 아 도 됩 니 다]

본 고의 실례 는 자 바스 크 립 트 가 그림 로 컬 미리 보기 기능 을 실현 하 는 것 을 설명 한다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
file 파일 필드 에서 그림 파일 을 선택 한 후 바로 미리 보기 합 니 다.서버 에 미리 올 리 지 않 고 미리 보기 그림 을 다시 시작 해서 Ajax 로 미리 보 여 줍 니 다.자바 스 크 립 트 를 직접 이용 하면 완성 할 수 있 고 IE6 도 호 환 할 수 있 습 니 다.구체 적 인 효 과 는 다음 그림 과 같다.

구체 적 인 실현 은 비 IE 브 라 우 저 에서 HTML 5 를 이용 하여 표시 하고 IE 브 라 우 저 에 서 는 IE 필터 기능 을 직접 호출 하여 실현 하 는 것 이다.구체 적 인 코드 는 다음 과 같다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>        </title>
    <style type="text/css">
      /*  IE  ,   id=imghead      Javascript  div id   。*/
      #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
    </style>
    <script type="text/javascript">
      //      , IE   HTML5   ,IE     
      function previewImage(file, MAXWIDTH, MAXHEIGHT){//MAXWIDTH、MAXHEIGHT       DIV――preview      
        var div = document.getElementById('preview');
        if (file.files && file.files[0]) {//HTML5  
          div.innerHTML = "<img id='imghead'></img>";
          var img = document.getElementById('imghead');
          img.onload = function(){
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            img.width = rect.width;
            img.height = rect.height;
            img.style.marginTop = rect.top + 'px';
          }
          var reader = new FileReader();
          reader.onload = function(evt){
            img.src = evt.target.result;
          }
          reader.readAsDataURL(file.files[0]);
        }
        else //  IE
        {
          var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
          file.select();
          var src = document.selection.createRange().text;
          div.innerHTML = "<img id='imghead'></img>";
          var img = document.getElementById('imghead');
          img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
          var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
          div.innerHTML = "<div style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";
        }
      }
      //           
      function clacImgZoomParam(maxWidth, maxHeight, width, height){
        var param = {
          top: 0,
          left: 0,
          width: width,
          height: height
        };
        if (width > maxWidth || height > maxHeight) {
          rateWidth = width / maxWidth;
          rateHeight = height / maxHeight;
          if (rateWidth > rateHeight) {
            param.width = maxWidth;
            param.height = Math.round(height / rateWidth);
          }
          else {
            param.width = Math.round(width / rateHeight);
            param.height = maxHeight;
          }
        }
        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
      }
    </script>
  </head>
  <body>
    <div id="preview" style="width:320px;height:240px;"></div><!--        DIV-->
    <input type="file" onchange="previewImage(this,320,240)" accept="image/*" /><!--           ,      previewImage  -->
  </body>
</html>

우선 preview 그림 미리 보기 div 에서 id=imghead 의 div 를 생 성 합 니 다.
IE 부분 이 아 닌 경우 사용자 가 선택 한 파일 을 HTML 5 로 직접 읽 을 수 있 으 며,function clacImgZoomParam(max Width,max Height,width,height)을 통 해 미리 보기 그림 의 크기 를 계산 한 후 이 그림 을 id=imghead 라 는 div 에 직접 넣 을 수 있 습 니 다.IE 라면 생 성 된 id=imghead 의 div 는 style 태그 에 설 정 된 필 터 를 부여 합 니 다.필 터 를 통 해 사용자 가 선택 한 그림 파일 을 불 러 오고 clacImgZoomParam 함수 로 크기 를 구하 여 크기 를 얻 은 후 preview 의 모든 내용 을 제거 하고 부 여 된 그림 필 터 를 정식으로 생 성하 여 크기 가 확 정 된 div 를 생 성 합 니 다.
파일 필드 에서 도accept="image/*"이 HTML 5 기능 을 사용 하여 사용자 가 그림 파일 만 선택 할 수 있 도록 제한 하지만,폼 을 제출 할 때 onSubmit 를 통 해 판단 하 는 동시에 서버 배경 에서 판단 하여 사용자 가 이상 한 물건 을 서버 에 보 내지 않도록 해 야 합 니 다.
자 바스 크 립 트 와 관련 된 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,JavaScript 이미지 조작 기술,JavaScript 도형 그리 기 기법 요약,JavaScript 오류 및 디 버 깅 기술 요약,JavaScript 데이터 구조 와 알고리즘 기술 총화JavaScript 스 트 리밍 알고리즘 및 기술 총화.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기