javascript - JS : Changing an input's text(value) on file input file select

Question

我已经成功创建了一个 HTML 表单，该表单从用户处获取文件，并且还允许为该文件指定名称。我还成功创建了一个 javascript 函数，该函数可以从上传流中获取文件的名称，并且仅获取名称(没有路径和扩展名)。 问题是，我有点无法像我想要的那样更改用于重命名上传的输入。这是带有两个示范警报的工作函数:

<script type="text/javascript">
function updateInput(val) {
    som = val.split('\\')[val.split('\\').length - 1];
    som = som.split('.')[0];
    alert('Hey 1');
    fileName.value = som;
    alert('Hey 2');
}; </script>

显示“Hey 1”警报，一切正常。“Hey 2”实际上没有显示!fileName 是文件名输入的名称和id，我DID尝试使用 document.getElementById ('fileName').value = ...但运气不好。

文件名声明:

<input type="text" runat="server" id="fileName" name="fileName" />

JavaScript 位于此输入下的代码中。 uploadImage 输入(文件类型)位于此输入之上。 (是的，事件被调用，som 得到了我想要的值)

*我正在尝试更改 input:text 元素的值。我会尝试一下 var 的事情。

如果您能提供帮助，谢谢!

Answer 1

据我了解您的问题，下面的代码应该可以正常工作:

<script type="text/javascript">
function updateInput(val) {
    var som = val.split('\\')[val.split('\\').length - 1];
    som = som.split('.')[0];
    alert('Hey 1');
    document.getElementById('<%=fileName.ClientID %>').value = som;
    alert('Hey 2');
}; </script>

因为runat="server" ，浏览器中元素的 id 将与您在 .aspx 中看到的不同。文件。 HTML 元素的 ID 类似于 CotentPlaceholder1_fileName ，所以document.getElementById('fileName')找不到它并且document.getElementById('fileName').value = son;会抛出错误。

与fileName.value = som;有同样的问题- 据我了解，您正在尝试使用 IE 的功能(不确定它是否是 IE 独有的功能，我只是从不使用它，但请记住有类似的东西)，它使用元素的 ID 在全局命名空间中创建变量。 ID 与 fileName 不同，因此变量名称也不同。

获取 runat="server" 的 id像浏览器中的元素一样，您可以使用 .ClientID 服务器端对象的属性。

此外，您应该使用var在函数作用域内定义变量。喜欢var som = val.split('\\')[val.split('\\').length - 1]; 。这样它在全局范围内(updateInput函数之外)将不可见。否则您将来可能会遇到问题