2013-04-17 5 views
0

Я пытаюсь получить в основном изображение предварительного просмотра, и я занимаюсь некоторыми исследованиями и следил за некоторыми другими кодами народов, но по какой-то причине мой образ не появится, может кто-нибудь сказать мне, почему он не появится?HTML-файл изображения не будет отображаться

HTML код

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

JavaScript

<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> 

Если кто-то может сказать мне, что я делаю неправильно было бы весьма признателен! Thanks

+0

ресурсы, которые я использовал: [HTML 5 Rocks] (http://www.html5rocks.com/en/tutorials/file/dndfiles/) [Использование API HTML5] (http://www.onlywebpro.com/ 2012/01/24/create-thumbnail-preview-of-images-using-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) –

ответ

0

Видимо, это важно, где вы размещаете javascript. Все, что я должен был сделать, чтобы заставить его работать, - переместить javascript ниже результата, и он отлично работает сейчас!

+0

Не имеет значения, где вы помещаете скрипт, чтобы работать, нужно убедиться, что документ был загружен. Если вы завершите прослушиватель событий следующим образом: \t window.onload = function() {\t \t document.getElementById ('myfile'). AddEventListener ('change', handleFileSelect, false); } вы можете нормально работать с вашими функциями: посмотрите обновленный jsbin http://jsbin.com/atekeh/3 –

1

Ваш код и выглядит нормально. Посмотрите: http://jsbin.com/atekeh

Возможно, вы используете браузер без API-интерфейса API?

+0

Я как бы думал, что то же самое, но когда я использую эти примеры, он отлично работает. в этом же браузере ... Даже ваша ссылка работает! –

Смежные вопросы