사진 업로드 전 미리 보기

사진 을 올 리 고 그림 을 미리 볼 수 있 습 니 다. 사진 을 올 리 면 어떻게 되 는 지 알 수 있 습 니 다. 이 기능 은 js 로 이 루어 진 다음 에 fileupload 컨트롤 의 change 이벤트 에서 호출 됩 니 다. 그러면 fileupload 로 그림 을 선택 한 후에 그림 이 자동 으로 표 시 됩 니 다.기능 은 간단 하지만 실 용적 입 니 다.
그림 미리 보기 js 코드:

<script type="text/javascript">
        function setImagePreview(docObj,localImagId,imgObjPreview) 
        {
            if(docObj.files && docObj.files[0])
            {
                //   ，   img  
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '300px';
                imgObjPreview.style.height = '200px';                    


                //  7          getAsDataURL()    ，        
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            }
            else
            {
                //IE ，    
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                
                //        
                localImagId.style.width = "300px";
                localImagId.style.height = "200px";
                
                //       ，             
                try
                {
                    localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                 }
                 catch(e)
                 {
                    alert("           ，     !");
                    return false;
                  }                          
                  imgObjPreview.style.display = 'none';
                  document.selection.empty();
            }
            return true;
        }
</script>

 
  
 
fileupload控件及用来预览图片的image：
 
  
  
 
<div id="localImag"  style="width: 300px; height: 200px">
   <img id="preview" alt="    " src="../../Images/noImage.gif" width="300px" height="200px" />
</div>
   <asp:FileUpload ID="PicLoad" Width="300px" runat="server" onchange="javascript:setImagePreview(this,localImag,preview);">
   </asp:FileUpload>
  
기능 도 간단 하고 코드 도 알 기 쉬 워 요. 제 가 쓸데없는 말 을 하지 않 아 도 알 아 보 실 거 라 고 믿 어 요.이런 글 을 쓰 는 것 은 정말 할 말 이 없 는 것 같 습 니 다. 더 말 하지 않 고 코드 에 중점 을 두 는 것 이 좋 겠 습 니 다.
저자: liushuijinger 발표 2013 - 3 - 25 9: 38: 30 원문 링크
댓 글