Как получить имя файла, когда пользователь выбирает файл через? - PullRequest
Новая
       2

Как получить имя файла, когда пользователь выбирает файл через?

53 голосов
/ 03 февраля 2010

Я видел подобные вопросы раньше, но из-за соображений безопасности их решение не было найдено.

Но сегодня я вижу, что hostmonster успешно реализовал это, когда я открываю тикет и прикрепляю файл к его бэкэнду.

Работает как с Firefox, так и с IE (точнее версия 8).

Я проверил, что это именно сценарии на стороне клиента, запрос не отправлен (с firebug).

Теперь, мы можем пересмотреть этот вопрос?

Ответы [ 4 ]

96 голосов
/ 03 февраля 2010

Вы можете получить имя файла , но не можете получить полный путь к файловой системе клиента.

Попробуйте получить доступ к атрибуту value вашего файла input в событии change.

Большинство браузеров будут давать вам только имя файла , но есть исключения, например IE8, которые дадут вам поддельный путь, например: "C:\fakepath\myfile.ext" и более старые версии ( IE <= 6 </em>), который фактически даст вам полный путь к файловой системе клиента (из-за отсутствия защиты). 

document.getElementById('fileInput').onchange = function () {
  alert('Selected file: ' + this.value);
};
32 голосов
/ 04 апреля 2017

Вы можете использовать следующий код:

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>
9 голосов
/ 03 февраля 2010

только что проверил это и похоже работает в 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>
2 голосов
/ 18 марта 2017

Я отвечу на этот вопрос с помощью Simple Javascript , который поддерживается во всех браузерах, которые я тестировал до сих пор (от IE8 до IE11, Chrome, FF и т. Д.). Вот код. 

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";
    }
    <p>
        <input type="file" id="file" multiple onchange="GetFileSizeNameAndType()" />
    </p>

    <div id="fp"></div>
    <p>
        <div id="divTotalSize"></div>
    </p>

* Обратите внимание, что мы отображаем размер файла в килобайтах. Чтобы получить в МБ, разделите его на 1024 * 1024 и т. Д. *.

При выборе файла он будет выполнять следующие действия Snapshot of a sample output of this code

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...