javascript 拒绝在 head/external 文件中工作

Question

我正在使用以下代码在上传前进行图片预览。代码有效，但我想 将脚本 存储在 外部文件 或至少 html-头。我不知道该怎么做。我认为我的问题出在这部分，但我一点也不确定：

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>

Answer 1

第 1 步：

您只需要创建一个新文件例如"extJsFile.js".

第 2 步：

将内容放在问题代码的标签之间（为了简单起见，我不会重复相同的代码）然后在 html 文件的标签之间写一行。（假设 - 您将 js 和 html 放在项目的同一目录中）

PS: 你至少应该 google 在提问之前，无论如何继续你的代码...

javascript 拒绝在 head/external 文件中工作

javascript refuses to work in head/external file

javascript

external

head

filereader