jQuery 和 input[type="file"] 问题答案

【问题标题】：jQuery and input[type="file"] questionjQuery 和 input[type="file"] 问题
【发布时间】：2011-05-24 21:34:40
【问题描述】：

我的问题很简单：

我想存储我使用文件输入选择的文件名，并使用 jQuery 我想立即将该名称放在其他地方而无需刷新页面。

也许我会用文件名替换一个简单的文本。我该怎么做？

例子：

开头的文字：你好世界

选择文件后，“Hello World”将替换为“my_filename.gif”。

想法？

【问题讨论】：

标签： jquery html text file-upload input

【解决方案1】：

您可以将其保存在针对元素的数据函数中：

function getFileNameFromPath(path) {
        var ary = path.split("\\");
        return ary[ary.length - 1];
    }

    $(function () {

        $('input[type=file]').change(function () {
            $(this).data(
                'fileName',
                getFileNameFromPath($(this).val())
                );

            alert($(this).data('fileName'));
        });

    });

【讨论】：

【解决方案2】：

这是一个潜在的解决方案：

<input type="file" onchange="$('#helloWorld').val($(this).val());"/>
<input id="helloWorld" value="Hello World"/>

您可以查看here

编辑：

修改它，使值最初设置为“Hello World”，而不是 innerHTML。

【讨论】：

在标记中混合 javascript 逻辑是不好的做法，应该避免
@XGreen 总的来说，我同意你的看法。但是，我坚信可以将 JavaScript 事件添加到其标记中的元素。这使得事件处理程序在查看 HTML 时变得清晰，如果它们被适当地命名，在 JavaScript 文件中也是如此。如果我正在做一些更复杂的事情，我会在 JavaScript 文件中创建一个 onchange 函数并引用它。但是，我认为在这种情况下会增加不必要的复杂性，并使输入之间的联系更加模糊。
当你想改变某个元素的功能时会发生什么。或者更好的是，删除它？现在你必须访问两个文件，删除一个函数，摆脱事件处理程序？你需要分离。这也允许改进可访问性。您将面临挑战，让您的文档无需 javascript 即可通过文档本身访问。 HTML 应该能够在没有 Javascript（当然还有 CSS）的帮助下独立生存。
@XGreen 我会说在元素的事件处理程序可能发生变化的情况下，你是对的，应该从 HTML 中删除事件声明以避免混淆。至于 HTML 能够自行生存，当 JavaScript 事件不可用时，它仍然会呈现相同的内容，但可能会有更好的 JavaScript 错误，这将有助于调试页面无法完全正常运行的原因。
@davin 不知道你在做什么。是否有充分的理由选择“”而不是“”？