HTML5 - 로컬 경로에서 이미지를 동적으로 만드시겠습니까?

Question

로컬 파일에 대한 경로 만있는 경우 HTML 이미지를 만들 수 있습니까? 나는 filereader를 사용하려했지만 단순한 경로가 작동하지 않습니다. 문제를 어떻게 해결할 수 있습니까?

JS

이 같은

var reader = new FileReader(); 
reader.onload = { 
    $('#myImg').attr('src', e.target.result); 
}; 
    reader.readAsDataURL("file:///C:/Users/me/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg "); 

Answer 1

이것은 간단합니다. JavaScript로 파일을 읽으려는 도구 :

Fiddle

자바 스크립트 코드는 다음과 같습니다

var reader = new FileReader(); 
reader.onerror = function(ev) { 
    $('#output').html('=== Error reading file ==='); 
} 
reader.onload = function(ev) { 
    $('#output').html(ev.target.result); 
}; 
reader.readAsDataURL(e.target.files[0]); 

당신은 이미지가 이미지의 base64로 dataURI 당신을 발표 할 예정이다 파일을 선택합니다.

이미지가 아닌 파일을 선택하지 않으려면 어떻게 될지 모르겠습니다.

Answer 2

무엇인가? 또한

var x=document.createElement("img"); 
x.src="C:\data\images\test.jpg"; 
x.style.height="50px"; 
document.getElementById('whereimgoing').appendChild(x); 

나는이 웹 사이트에있는 경우 다음이

Answer 3

var reader = new FileReader(); 
reader.onload = function(e) { 
$('#myImg').attr('src', reader.result); 
}; 
reader.readAsDataURL("file:///C:/Your/path/msohtmlclip1/01/clip_image002.jpg"); 

괜찮을해야 로컬 파일에 대한 액세스 권한을 부여하는 경우 (브라우저 보안에 매우 의존 브라우저 설정을 확인하거나 것이라는 점을 추가해야합니다 서버 (localhost 또는 www.yourserver.com)에 배포 할 때 작동하면 시도하십시오. 브라우저가 다르게 동작 할 때 로컬 파일은 문제를 일으킬 수 있으며 임시 폴더를 사용하지 마십시오.