HTML 파일 이미지가 표시되지 않습니다

기본적으로 미리보기 이미지를 얻으려고 노력 중입니다. 일부 연구를 수행하고 일부 다른 사람 코드를 따라 갔지만 어떤 이유로 내 이미지가 표시되지 않습니다. 이유는 무엇입니까? 그것은 나타나지 않을 것입니까?HTML 파일 이미지가 표시되지 않습니다

HTML 코드

<input type="file" accept="image/*;capture=camera" id="myfile" name="myfile"> 
<output name="image" id="list"> </output>

자바 스크립트

<script> 
function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object, files[0] is your file 
    var f = files[0]; 
    var reader = new FileReader(); 

    reader.onload = (function(theFile) { 
     return function(e) { 
      document.getElementById('list').innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="50" />'].join(''); 
     }; 
    })(f); 

    reader.readAsDataURL(f); 
    } 

    document.getElementById('myfile').addEventListener('change', handleFileSelect, false); 
    </script>

누군가가 내가 잘못이 크게 감사하겠습니다는지 말해 수 있다면! 감사합니다.

출처

2013-04-17 Josh C.

리소스 i used : [HTML 5 Rocks] (http://www.html5rocks.com/en/tutorials/file/dndfiles/) [HTML5 API 사용] (http://www.onlywebpro.com/ 2012/01/24/create-thumbnail-preview-of-images-html5-api /를 사용하여) [HTML5로 이미지 캡처] (http://stackoverflow.com/questions/14281942/captured-images-with- html5 for mobile-devices) [기본 카메라 앱 HTML5] (http://stackoverflow.com/questions/7676036/can-you-launch-the-native-camera-app-from-an-html-5- web-app) –

분명히 어디에 자바 스크립트를 배치하는 것이 중요합니다. 내가 할 일을하기 위해서해야 할 일은 javascript를 출력 아래로 옮기는 것이고 지금은 완벽하게 작동합니다!

출처

2013-04-17 02:32:21

스크립트를 어디에 두어야하는지는 중요하지 않습니다. 작동하려면 문서가로드되었는지 확인해야합니다. 다음과 같이 이벤트 리스너를 래핑하는 경우 : \t window.onload = function() {\t \t document.getElementById ('myfile'). addEventListener ('change', handleFileSelect, false); } 당신은 당신의 기능이 제대로 작동하도록 할 수 있습니다. 업데이트 된 jsbin http://jsbin.com/atekeh/3을보십시오. –

코드가 제대로 작동합니다. 살펴보기 : http://jsbin.com/atekeh

아마도 파일 API가없는 브라우저를 사용하고 계십니까?

출처

2013-04-17 01:48:33

나는 똑같은 생각을하지만 그 예제를 사용할 때 잘 작동한다. 이 브라우저에서 ... 심지어 링크가 작동합니다! –

HTML 파일 이미지가 표시되지 않습니다

답변

관련 문제