输入文件：使用Javascript在文本输入中写入文件的名称
[英]input file: write the name of the file in a text input with Javascript
问题描述
I'm learning html and javascript and I wonder if it is possible to do the following: when uploading a file using a file input want the uploaded filename (without path) is written to a file input field .. Is this possible?. 
我正在学习html和javascript，我想知道是否可以执行以下操作：使用文件输入上传文件时，希望将上传的文件名（不带路径）写入文件输入字段。这可能吗？ Below is my code but can not get any link which explain how to do it for newbies. 下面是我的代码，但无法获得任何解释如何为新手做这个的链接。 Sorry if it is a very silly question, but I wonder if you can do only using javascript (not jQuery) and HTML without involving the server. 很抱歉，如果这是一个非常愚蠢的问题，但我想知道你是否只能使用javascript（不是jQuery）和HTML而不涉及服务器。
<html>
<head>
<script type="text/javascript">
(function alertFilename()
{
var thefile = document.getElementById('thefile');
//here some action to write the filename in the input text
}
</script>
</head>
<body>
<form>
<input type="file" id="thefile" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
<br> <br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
</body>
</html>
3 个解决方案
解决方案1
3 2013-09-18 00:53:11
Here is a fully working example JavaScript: 这是一个完整的JavaScript示例：
var filename;
document.getElementById('fileInput').onchange = function () {
filename = this.value.split(String.fromCharCode(92));
document.getElementById("some_text").value = filename[filename.length-1];
};
HTML: HTML：
<form>
<input type="file" id="fileInput" style="display: none;" />
<input type="button" value="Browse File..." onclick="document.getElementById('fileInput').click();" />
<br> <br>The name of the uploaded file is:
<input type="text" name="some_text" id="some_text" />
</form>
jsFiddle live example jsFiddle live example
Hope you find it helpful, Asaf 希望你觉得它有用，Asaf
解决方案2
1 2016-03-15 16:37:19
For the newcomers: 对于新人：
document.getElementById("thefile").onchange = function() { document.getElementById("some_text").value = this.files[0].name; }; /* BELOW FULLPATH VERSION (depending on browser) document.getElementById("thefile").onchange = function () { document.getElementById("some_text").value = this.value; };*/
<form> <input type="file" id="thefile" style="display: none;" /> <input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" /> <br> <br>The name of the uploaded file is: <input type="text" name="some_text" id="some_text" /> </form>
解决方案3
0 2013-09-18 00:43:11
Just take the file input' value, split it and take the last index: 只需取文件输入'值，拆分它并取最后一个索引：
Filename = document.getElementById('fileinput').value.split('/') [2];// or the last index returned here since the last index will always be the file name Filename = document.getElementById（'fileinput'）。value.split（'/'）[2]; //或者这里返回的最后一个索引，因为最后一个索引将始终是文件名
(Sorry that cant format my answer. I answered by a smartphone) （对不起，我不能格式化我的答案。我用智能手机回答）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.