Question

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

但今天我看到当我打开一张票并在后端附上一个文件时，hostmonster已经成功实现了这个。

它适用于firefox和IE（确切地说是版本8）。

我已经确认它完全是客户端脚本，没有发送请求（使用firebug）。

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

Answer 1

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

尝试在value事件中访问文件input的{{1}}属性。

大多数浏览器只会为您提供文件名，但有一些例外情况，例如IE8会为您提供伪路径，例如：change和旧版本（ IE＆lt; = 6 ）实际上会为您提供完整的客户端文件系统路径（由于缺乏安全性）。

"C:\fakepath\myfile.ext"

Answer 2

您可以使用下一个代码：

JS

    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);
    };

HTML

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

Answer 3

刚试过这样做，似乎可以在firefox＆amp; 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>

Answer 4

我将通过简单Javascript 回答这个问题，到目前为止我测试的所有浏览器都支持（IE8到IE11，Chrome，FF等）。

这是代码。

＆＃13;

function GetFileSizeNameAndType()
        {
        var fi = document.getElementById('file'); // GET THE FILE INPUT AS VARIABLE.

        var totalFileSize = 0;

        // VALIDATE OR CHECK IF ANY FILE IS SELECTED.
        if (fi.files.length > 0)
        {
            // RUN A LOOP TO CHECK EACH SELECTED FILE.
            for (var i = 0; i <= fi.files.length - 1; i++)
            {
                //ACCESS THE SIZE PROPERTY OF THE ITEM OBJECT IN FILES COLLECTION. IN THIS WAY ALSO GET OTHER PROPERTIES LIKE FILENAME AND FILETYPE
                var fsize = fi.files.item(i).size;
                totalFileSize = totalFileSize + fsize;
                document.getElementById('fp').innerHTML =
                document.getElementById('fp').innerHTML
                +
                '<br /> ' + 'File Name is <b>' + fi.files.item(i).name
                +
                '</b> and Size is <b>' + Math.round((fsize / 1024)) //DEFAULT SIZE IS IN BYTES SO WE DIVIDING BY 1024 TO CONVERT IT IN KB
                +
                '</b> KB and File Type is <b>' + fi.files.item(i).type + "</b>.";
            }
        }
        document.getElementById('divTotalSize').innerHTML = "Total File(s) Size is <b>" + Math.round(totalFileSize / 1024) + "</b> KB";
    }

＆＃13;

    <p>
        <input type="file" id="file" multiple onchange="GetFileSizeNameAndType()" />
    </p>

    <div id="fp"></div>
    <p>
        <div id="divTotalSize"></div>
    </p>

＆＃13;

*请注意，我们以KB（Kilobytes）显示文件大小。要获得MB，请将其除以1024 * 1024，依此类推*。

它会在选择时执行这些文件输出

当用户通过<input type =“file”/>选择文件时如何获取文件名？

4 个答案: