2016-12-22 3 views
0

Я использую следующий код для предварительного просмотра изображения перед загрузкой. Код работает, но я хочу, чтобы хранил сценарий в внешнем файле или, по крайней мере, в 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> 
+0

вы знаете .... вы можете добавить строку console.log() после каждой строки в вашем скрипте и увидеть, если что-то происходит там и где оно останавливается. Перед публикацией здесь вы должны попробовать базовую отладку. –

+0

Есть несколько вопросов. Во-первых, вы присваиваете * результат * непосредственной функции обработчику onload. то есть '(function test() {...})()'. Удаление 2-х наборов внешних парнеров будет хорошим началом: например, 'function test() {}' – ne1410s

ответ

0

Шаг 1 :

Вам просто нужно создать новый файл eg "extJsFile.js".

Шаг 2:

Поместите содержимое между тэгом кода вашего вопроса в (я не буду повторять один и тот же код, для простоты), а затем записать одну строку между тегом HTML-файл (Успение - вы кладете JS и HTML в том же каталоге вашего проекта)

PS:. вы должны, по крайней мере, Google, прежде чем задать вопрос, в любом случае вести с кодами ...

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