간단 한 JS 업로드 전 미리 보기 그림 구현 (IE8 호 환)
11192 단어 ie8
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <script type="text/javascript" language="javascript">
4
5 function PreviewImg(imgFile) {
6
7 var imgDiv = document.getElementById("gggg");
8
9 imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
10 imgDiv.filters("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
11 }
12 </script>
13 </head>
14 <body>
15 <form id="form1" runat="server">
16 <div>
17 <asp:FileUpload ID="fp" onchange="javascript:PreviewImg(this);" runat="server" />
18 </div>
19 <div id="gggg" style="width: 300px; height: 300px">
20 </div>
21 </form>
22 </body>
23 </html>처음에는 이것 을 보 았 다.
다음 코드 를 < head > < / head > 에 넣 습 니 다.
1 <script type="text/javascript" language="javascript">
2 <!--
3 function PreviewImg(imgFile){
4
5 var newPreview = document.getElementById("newPreview");
6 var imgDiv = document.createElement("div");
7 document.body.appendChild(imgDiv);
8 imgDiv.style.width = "118px"; imgDiv.style.height = "127px";
9 imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
10 imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
11 newPreview.appendChild(imgDiv);
12 var showPicUrl = document.getElementById("showPicUrl");
13 showPicUrl.innerText=imgFile.value;
14 newPreview.style.width = "80px";
15 newPreview.style.height = "60px";
16 }
17 -->
18 </script> 페이지 에 다음 코드 를 추가 합 니 다:
1 <div id="newPreview"></div>
2 <div id="showPicUrl"></div>
3 <hr />
4 <p>
5 ：<input type="file" size="20" onchange="javascript:PreviewImg(this);" />
6 </p>그 러 다 보니까 한 장만 미리 보기 가 안 돼!!미리 보기 한 장 에 한 장 추가!내 가 원 하 는 것 은 한 장만 미리 보 는 것 이다!인터넷 검색 을 통 해 이 방법 에 대한 설명 을 봤 습 니 다!!내 방법 을 얻 었 어!!
다음은 이 방법의 설명 이다.
IE6 에 서 는 img 의 src 속성 을 편리 하 게 이용 하여 로 컬 그림 미리 보 기 를 실현 할 수 있 으 나 IE7 에 서 는 이러한 방법 이 통 하지 않 습 니 다.알파 이미지 로 더 를 사용 해 야 합 니 다.
설명:
대상 용기 경계 에 대상 의 배경 과 내용 사이 에 그림 을 표시 합 니 다.이 그림 을 자 르 고 사 이 즈 를 바 꾸 는 동작 을 제공 합 니 다.PNG (Portable Network Graphics) 형식 으로 불 러 오 면 0% - 100% 투명도 가 제 공 됩 니 다.
문법:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
enabled: 옵션 이 있 습 니 다.불 값 (Boolean).필터 가 활성화 되 었 는 지 설정 하거나 검색 합 니 다.true: 기본 값 입 니 다.필터 활성화.false: 필터 가 금지 되 어 있 습 니 다.
sizingMethod: 옵션 이 있 습 니 다.문자열 (String).필터 역할 을 하 는 대상 의 그림 을 대상 용기 경계 에 표시 하거나 검색 합 니 다.crop: 대상 크기 에 맞 게 그림 을 자 릅 니 다.image: 기본 값.그림 의 크기 에 맞 게 대상 의 크기 경 계 를 늘 리 거나 줄 입 니 다.scale: 대상 의 크기 경계 에 맞 게 그림 크기 를 조정 합 니 다.
src: 필수 옵션.문자열 (String).절대 또는 상대 url 주소 로 배경 그림 을 지정 합 니 다.이 인 자 를 무시 하면 필터 가 작 동 하지 않 습 니 다.
출처: http://hi.baidu.com/pukuimin1226/item/ddf147972c6d9cdc1a49dfe9
좋은 웹페이지 즐겨찾기
