Question

我正在尝试上传多个文件，甚至我也收到了多个文件。

但是我试图逐行显示那些选定的文件，所以我使用标签，但我无法创建这里是我的代码

    <script type="text/javascript">
                        window.onload = function() {
                            var fileInput = document.getElementById('fileInput');

                            fileInput.addEventListener('change', function(e) {
                                var file1 = fileInput.files;
                                var output = [];
                                for(var i=0,f;f=file1[i];i++){
                                    output.push('<li>'+f.name+'</li>');
                                    alert(f.name);
                                    document.getElementById('list').innerHTML = '<ul>'+output+'</ul>';
                                }
                            });
                        }
                        </script>


                                <input type="file" id="fileInput" multiple="multiple" >
                                <p id="list"></p>

我是这样的，

file1.txt file12.txt

但我期待像这样的输出

FILE1.TXT

file2.txt

请告诉我哪里错了？

为什么我无法创建＆lt; li＆gt; dynamicall，还有其他方法吗？

Answer 1

看起来你将innerHTML设置在循环内而不是外部。此外，output是一个数组，而不是一个字符串。

(function() {
    "use strict";

    var files  = [{'name':'file1'}, {'name': 'file2'}],
        output = '',
        i;

    for (i = 0; i < files.length; i++) {
        output += '<li>' + files[i].name + '</li>';
    }

    document.getElementById('list').innerHTML = '<ul>' + output + '</ul>';
})();

jsFiddle

Answer 2

好的提到，你重置输出是错误的循环，并使它成为一个字符串可能会更好。我认为这是有效的：

 <script type="text/javascript">
                    window.onload = function() {
                        var fileInput = document.getElementById('fileInput');
                        var output = "";

                        fileInput.addEventListener('change', function(e) {
                            var file1 = fileInput.files;

                            for(var i=0,f;f=file1[i];i++){
                                output += '<li>'+f.name+'</li>';
                                alert(f.name);
                                document.getElementById('list').innerHTML = '<ul>'+output+'</ul>';
                            }
                        });
                    }
                    </script>

无法使用javascript </li>动态创建<li>元素

2 个答案: