input: file 경로를 읽고 로컬 그림을 표시하는 방법

2860 단어
 
  




Image preview example
<br>var loadImageFile = (function () { <br>if (window.FileReader) { <br>var oPreviewImg = null, oFReader = new window.FileReader(), <br>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; <br> <br>oFReader.onload = function (oFREvent) { <br>if (!oPreviewImg) { <br>var newPreview = document.getElementById("imagePreview"); <br>oPreviewImg = new Image(); <br>oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px"; <br>oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px"; <br>newPreview.appendChild(oPreviewImg); <br>} <br>oPreviewImg.src = oFREvent.target.result; <br>}; <br> <br>return function () { <br>var aFiles = document.getElementById("imageInput").files; <br>if (aFiles.length === 0) { return; } <br>if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; } <br>oFReader.readAsDataURL(aFiles[0]); <br>} <br> <br>} <br>if (navigator.appName === "Microsoft Internet Explorer") { <br>return function () { <br>alert(document.getElementById("imageInput").value); <br>document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value; <br> <br>} <br>} <br>})(); <br>














그러나 주의해야 할 것은 IE8에서 IE8이 자발적으로 실제 경로를 숨겼기 때문에 alert로 인쇄한 결과는 C:/fakepath/*이다.jpg로 인해 이 방법은 사용할 수 없습니다
해결 방법은 도구 -> 인터넷 옵션 -> 보안 -> 사용자 지정 수준 -> 기타 에서 로컬 파일을 서버로 업로드할 때 로컬 디렉토리 경로 포함 을 찾아 사용 을 선택하면 됩니다.

좋은 웹페이지 즐겨찾기