Fatal编程技术网
  • javascript/
  • Javascript 如何在用户通过<；选择文件时获取文件名；输入类型="；文件"/>；？

Javascript 如何在用户通过<；选择文件时获取文件名；输入类型="；文件"/>；？

javascript html file

Javascript 如何在用户通过<；选择文件时获取文件名；输入类型="；文件"/>；？,javascript,html,file,Javascript,Html,File,我以前见过类似的问题，由于安全原因，最终没有解决方案 但今天我看到hostmonster已经成功地实现了这一点，当我打开一个票证并在其后端附加一个文件时 它同时适用于firefox和IE（确切地说是第8版） 我已经验证了它完全是客户端脚本，没有发送任何请求（使用firebug） 现在，我们可以重新考虑这个问题了吗？您可以获取文件名，但无法获取完整的客户端文件系统路径 在change事件中，尝试访问文件input的value属性 大多数浏览器只提供文件名，但也有例外情况，如IE8，它会提供一个伪路

我以前见过类似的问题，由于安全原因，最终没有解决方案

但今天我看到hostmonster已经成功地实现了这一点，当我打开一个票证并在其后端附加一个文件时

它同时适用于firefox和IE（确切地说是第8版）

我已经验证了它完全是客户端脚本，没有发送任何请求（使用firebug）

现在，我们可以重新考虑这个问题了吗？

您可以获取文件名，但无法获取完整的客户端文件系统路径

在
change
事件中，尝试访问文件
input
的
value
属性

大多数浏览器只提供文件名，但也有例外情况，如IE8，它会提供一个伪路径，如：
“C:\fakepath\myfile.ext”
和更旧的版本（IE刚刚测试过这样做，它似乎在firefox&IE中工作）

<html>
    <head>
        <script type="text/javascript">
            function alertFilename()
            {
                var thefile = document.getElementById('thefile');
                alert(thefile.value);
            }
        </script>
    </head>
    <body>
        <form>
            <input type="file" id="thefile" onchange="alertFilename()" />
            <input type="button" onclick="alertFilename()" value="alert" />
        </form>
    </body>
</html>


函数alertFilename（）
{
var thefile=document.getElementById（'thefile'）；
警报（文件值）；
}
我将通过迄今为止我测试过的所有浏览器（IE8到IE11、Chrome、FF等）都支持的简单Javascript来回答这个问题

这是代码

函数GetFileSizeNameAndType（） { var fi=document.getElementById（'file'）；//将文件输入作为变量获取。 var totalFileSize=0； //验证或检查是否选择了任何文件。 如果（fi.files.length>0） { //运行循环以检查每个选定文件。
对于（var i=0；i您可以使用下一个代码：

JS

HTML
你所说的“获取文件名”是什么意思？文件名不是很明显，因为用户刚刚选择了它吗？我在chrome中获取了
C:\fakepath\…
，但出于我的目的，这是很好的。谢谢。这是出于安全原因。网站不能了解用户的文件夹路径。可以这样清理：
f=f.replace（/.[\/\]/，“”）
在IE中呢？在处理函数中捕获事件，然后使用evt.target.files[0].name。这很有趣。当我这样做时，我会得到
C:\fakepath\background.jpg
。实际上就是这样。 
<html>
    <head>
        <script type="text/javascript">
            function alertFilename()
            {
                var thefile = document.getElementById('thefile');
                alert(thefile.value);
            }
        </script>
    </head>
    <body>
        <form>
            <input type="file" id="thefile" onchange="alertFilename()" />
            <input type="button" onclick="alertFilename()" value="alert" />
        </form>
    </body>
</html>

    function showname () {
      var name = document.getElementById('fileInput'); 
      alert('Selected file: ' + name.files.item(0).name);
      alert('Selected file: ' + name.files.item(0).size);
      alert('Selected file: ' + name.files.item(0).type);
    };

<body>
    <p>
        <input type="file" id="fileInput" multiple onchange="showname()"/>
    </p>    
</body>