Я использую следующий код для предварительного просмотра изображения перед загрузкой. Код работает, но я хочу, чтобы хранил сценарий в внешнем файле или, по крайней мере, в html-head. Я не могу понять, как это сделать. Я думаю, что моя проблема с этой стороны, но я не уверен, что у всех:javascript отказывается работать в главном/внешнем файле
reader.onload = (function(theFile) {...
Помощь будут оценены :)
Вот идет HTML:
<!doctype html>
<html>
<head>
<style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
</head>
<body>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
document.getElementById('list').innerHTML = "";
//the problem might be caused by this ".onload" ?
reader.onload = (function(theFile) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/><input type="text" name="', escape(theFile.name), '-title" placeholder="title" /><input type="text" name="', escape(theFile.name), '-description" placeholder="description" />'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
вы знаете .... вы можете добавить строку console.log() после каждой строки в вашем скрипте и увидеть, если что-то происходит там и где оно останавливается. Перед публикацией здесь вы должны попробовать базовую отладку. –
Есть несколько вопросов. Во-первых, вы присваиваете * результат * непосредственной функции обработчику onload. то есть '(function test() {...})()'. Удаление 2-х наборов внешних парнеров будет хорошим началом: например, 'function test() {}' – ne1410s