Question

我正在尝试使用已选择的文件名填充类型为text的输入。根据我的阅读，有时您必须将值设置为＆＃34;＆＃34;或null onClick 然后 onchange 设置占位符。

我尝试了很多不同的变体，但它似乎并没有尝试。我在俯瞰什么？

我非常基本的例子......

<script type="text/javascript">
    getElementById("upFile").onClick = function(){
        this.value = "";
    }

    getElementById("upFile").onchange = function(){
        getElementById("uploadName").value = this.value;
    }
</script>


    <input type="text" name="uploadName" id="uploadName" placeholder="Attachment Title">
    <input type="file" id="upFile" name="upFile" enctype="multipart/form-data"><br>

我读过的内容

Changing the placeholder text based on the users choice

Change placeholder text

Upload files using input type="file" field with .change() event not always firing in IE and Chrome

HTML input file selection event not firing upon selecting the same file

这些似乎都不是我的问题......

Answer 1

您缺少document.getElementById和onClick应该是onclick

Answer 2

你走了。您可以摆脱onclick事件监听器，并注意更改。文件上传元素创建一个文件数组，您可以这样访问它：

<input type="text" name="uploadName" id="uploadName" placeholder="Attachment Title">
<input type="file" id="upFile" name="upFile" enctype="multipart/form-data">

<script>
    document.getElementById("upFile").onchange = function(){
        // single file selection, get the first file in the array
        document.getElementById("uploadName").value = this.files[0].name; 
    }
</script>

供参考：如果脚本标记位于元素之前，则会发生这种情况。它会在读取后运行脚本，并说它无法找到document.getElementById("upFile")

引用的元素

未捕获的TypeError：无法设置属性＆＃39; onchange＆＃39;为null at：2：48

文件输入JS onchange，onclick不会触发

2 个答案: