input: file 경로를 읽고 로컬 그림을 표시하는 방법
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로 인해 이 방법은 사용할 수 없습니다
해결 방법은 도구 -> 인터넷 옵션 -> 보안 -> 사용자 지정 수준 -> 기타 에서 로컬 파일을 서버로 업로드할 때 로컬 디렉토리 경로 포함 을 찾아 사용 을 선택하면 됩니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.