2

我有以下 JS/HTML 代码：

<input type="text" class="file" name="file_info" id="file_info">
    <div class="file_upload">
        <input type="file" id="file_upload" onchange="name();">
    </div>
<script>
    function name() {
        var fileName = document.getElementById("file_upload").value;
        var fnSplit = fileName.split(/[\/\\]/);
        fileName = fnSplit[fnSplit.length - 1];
      document.getElementById('file_info').innerHTML = 'Fred Flinstone';
    }
</script>

我希望在上传文件后，文件名将显示在 tput 文本中，但是这个 cide 不起作用。

我该如何解决？

更新：文件名应该在输入文本中

4

3 回答 3

3

将script元素移到元素之前input。你最好把script元素放在你head喜欢的里面

演示

已更新答案！

于 2013-07-13T14:59:20.897 回答
1

你可以试试这段代码：

<!DOCTYPE html>
<html>
    <head>
        <script>
            function myFunction()
            {
                var fileName =document.getElementById("file_upload").value;
                var fnSplit = fileName.split(/[\/\\]/);
                fileName = fnSplit[fnSplit.length - 1];

                document.getElementById('file_info').value = fileName
            }
        </script>
    </head>
    <body>

        <input type="text" class="file" name="file_info" id="file_info">
        <div class="file_upload">
            <input type="file" id="file_upload" onchange="myFunction();">
        </div>
    </body>
</html>
于 2013-07-13T15:24:44.810 回答
-2

像这样做：

HTML

<div class="file_upload">
    <input type="file" id="file_upload">
</div>
<div id="file_info"></div>

JS

function name(file) {
    var reader = new FileReader();
    reader.readAsText(file);

    reader.onload = function (event) {
        document.getElementById('file_info').innerHTML = "Filename: " + file.name + "\nContent: " + event.target.result;
    };

    reader.onerror = function () {
        alert('Unable to read ' + file.name);
    };
}

document.getElementById('file_upload').onchange = function () {
    name(this.files[0]);
};

演示

于 2013-07-13T15:10:27.223 回答