다음은 ie9에서 구현한 프리뷰입니다. 다만, ie8에서도 fiter 기능을 사용하는 것 같아서 ie8용 버전은 따로 작성하지 않은 것으로 기억합니다. >
문서<br>< /head> <br><body> <br><p><style type="text/css"> <br>#kk{ <br>높이:400px; 🎜>오버플로: 숨김 <br>} <br>#preview_wrapper{ <br>너비:300px; <br>배경색:#CCC; } <br># Preview_fake{ /* 이 개체는 IE에서 미리보기 이미지를 표시하는 데 사용됩니다*/ <br>filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale) <br>width:300px <br>overflow; : Hidden; <br>} <br>#preview_size_fake{ /* 이 개체는 IE에서 이미지의 원래 크기를 얻는 데만 사용되며 다른 용도는 없습니다*/ <br>filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=image); <br> width:300px; <br>visibility:hidden; <br>overflow: Hidden; <br>} <br>#preview{ /* 이 개체는 FF 아래에 미리보기 이미지를 표시하는 데 사용됩니다. / <br>너비:300px; <br>높이:300px; <br>오버플로: 숨김 <br>} <br></style><script type="text/javascript"> onUploadImgChange(sender){ <br>if ( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){ <br>alert('이미지 형식이 잘못되었습니다! '); <br>return false; <br>} <br>var objPreview = document.getElementById('preview'); <br>var objPreviewFake = document.getElementById('preview_fake') <br>var objPreviewSizeFake .getElementById('preview_size_fake'); <br>if( sender.files && sender.files[0] ){ //여기서 chrome과 ff가 호환됩니다. <br>objPreview.style.display = 'block'; >objPreview.style.width = 'auto'; <br>objPreview.style.height = 'auto'; <br>// 보안 문제로 인해 Firefox는 더 이상 input[file]을 통해 직접 전체 파일을 얻을 수 없습니다. .value Path <br>objPreview.src = sender.files[0].getAsDataURL(); <br>}else if( objPreviewFake.filters ){ <br>// 로컬 이미지 주소를 img로 설정하면 IE7, IE8이 나타납니다. .src 설명할 수 없는 결과<br>//(동일한 환경이 표시될 때도 있고 표시되지 않을 때도 있음) 필터로만 해결 가능<br>// IE7, IE8은 보안상의 문제로 input[file].value를 직접 전달할 수 없습니다. 전체 파일 경로 가져오기 <br>sender.select(); <br>sender.blur(); <br>var imgSrc = document.selection.createRange().text <br>objPreviewFake.filters.item('DXImageTransform .Microsoft.AlphaImageLoader').src = imgSrc; <br>objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; <br>alert("이미지가 성공적으로 선택되었습니다!"); (objPreviewSizeFake.offsetWidth); <br>autoSizePreview( objPreviewFake,objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight ); <br>objPreview.style.display = <br>} <br>} <br>function onPreviewLoad( sender ){ <br>autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight ); <br>} <br>function autoSizePreview( objPre,originWidth,originHeight ){ <br>var ZoomParam = clacImgZoomParam( 300, 300,originWidth,originHeight ); <br>objPre.style.width = ZoomParam.width 'px'; <br>objPre.style.height = ZoomParam.height 'px'; <br>objPre.style.marginTop = ZoomParam.top 'px' ; <br>objPre.style.marginLeft = ZoomParam.left 'px'; <br>} <br>function clacImgZoomParam( maxWidth, maxHeight, width, height ){ <br>var param = { width:width, height:height , 상단:0, 왼쪽:0 }; <br>if( 너비>maxWidth || 높이>maxHeight ){ <br>rateWidth = 너비 / maxWidth; <br>rateHeight = 높이 / maxHeight; rateHeight ){ <br>param.width = maxWidth; <br>param.height = height / rateWidth; <br>}else{ <br>param.width = width / rateHeight; 🎜>} <br>} <br>param.left = (maxWidth - param.width) / 2 <br>param.top = (maxHeight - param.height) / 2; } <br></script> <input name="localfile" type="file" id="localfile" size="28" onchange="onUploadImgChange(this)"/> 이미지를 미리 보는 데 사용됩니다--<br><div id="kk"> <br><div id="preview_wrapper"> 🎜 ><img id="preview" src="" onload="onPreviewLoad(this)"/> <br></div> <br></div> <br><img id="preview_size_fake" /> <br></div></p> <br></body> <br><br>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
