Имя файла, выбранного в поле файла [дубликат]

Я рад, что браузеры хотят спасти нас от навязчивых скриптов и т. п. Я не доволен тем, что IE помещает что-то в браузер, что делает простой стиль-fix похожим на хакерскую атаку!

Я использовал & lt; span>, чтобы представить входной файл, чтобы я мог применить соответствующий стиль к & lt; div> вместо & lt; input> (еще раз, из-за IE). Теперь из-за этого IE хочет показать пользователю путь со значением, который просто гарантированно поставит их на страже и, по крайней мере, опасается (если не полностью их отпугнуть?!) ... БОЛЬШЕ IE-CRAP!

Во всяком случае, благодаря тем, кто разместил объяснение здесь: Безопасность браузера IE: добавление «fakepath» в путь к файлу во входном файле [type = «file»] , я собрал minor fixer-upper ...

Нижеприведенный код выполняет две функции: он исправляет ошибку IE8, в которой событие onChange не срабатывает до тех пор, пока поле onBlur не выведет поле и не обновит элемент с очищенным файловым пути, который не пугает пользователя.

// self-calling lambda to for jQuery shorthand "$" namespace
(function($){
    // document onReady wrapper
    $().ready(function(){
        // check for the nefarious IE
        if($.browser.msie) {
            // capture the file input fields
            var fileInput = $('input[type="file"]');
            // add presentational <span> tags "underneath" all file input fields for styling
            fileInput.after(
                $(document.createElement('span')).addClass('file-underlay')
            );
            // bind onClick to get the file-path and update the style <div>
            fileInput.click(function(){
                // need to capture $(this) because setTimeout() is on the
                // Window keyword 'this' changes context in it
                var fileContext = $(this);
                // capture the timer as well as set setTimeout()
                // we use setTimeout() because IE pauses timers when a file dialog opens
                // in this manner we give ourselves a "pseudo-onChange" handler
                var ieBugTimeout = setTimeout(function(){
                    // set vars
                    var filePath     = fileContext.val(),
                        fileUnderlay = fileContext.siblings('.file-underlay');
                    // check for IE's lovely security speil
                    if(filePath.match(/fakepath/)) {
                        // update the file-path text using case-insensitive regex
                        filePath = filePath.replace(/C:\\fakepath\\/i, '');
                    }
                    // update the text in the file-underlay <span>
                    fileUnderlay.text(filePath);
                    // clear the timer var
                    clearTimeout(ieBugTimeout);
                }, 10);
            });
        }
    });
})(jQuery);

кажется, что вы не можете найти полный путь в вашем localhost by js, но вы можете скрыть fakepath, чтобы просто показать имя файла. Используйте jQuery, чтобы получить выбранное имя файла ввода файла без пути

Если вам действительно нужно отправить полный путь к uploded файлу, то вам, вероятно, придется использовать что-то вроде подписанного java-апплета, поскольку нет никакой возможности получить эту информацию, если браузер не отправит его .

Используйте

document.getElementById("file-id").files[0].name; 

вместо

document.getElementById('file-id').value

Некоторые браузеры имеют функцию безопасности, которая запрещает JavaScript знать локальный полный путь вашего файла. Это имеет смысл - как клиент, вы не хотите, чтобы сервер знал файловую систему вашего локального компьютера. Было бы неплохо, если бы все браузеры сделали это.

Если вы перейдете в Internet Explorer, Tools, Internet Option, Security, Custom, найдите «Включить путь к локальному каталогу При загрузке файлов на сервер» (это довольно просто) и нажмите «Включить». Это будет работать

Hy там, в моем случае я использую среду разработки asp.net, поэтому я хочу загрузить эти данные в asynchronus ajax-запрос, в [webMethod] вы не можете поймать загрузчик файлов, поскольку он не является статическим элементом, поэтому я должен был сделать оборот для такого решения, установив путь, чем преобразовать желаемое изображение в байты, чтобы сохранить его в БД.

Вот моя функция javascript, надеюсь, что вам это поможет:

function FixPath(Path)
         {
             var HiddenPath = Path.toString();
             alert(HiddenPath.indexOf("FakePath"));

             if (HiddenPath.indexOf("FakePath") > 1)
             {
                 var UnwantedLength = HiddenPath.indexOf("FakePath") + 7;
                 MainStringLength = HiddenPath.length - UnwantedLength;
                 var thisArray =[];
                 var i = 0;
                 var FinalString= "";
                 while (i < MainStringLength)
                 {
                     thisArray[i] = HiddenPath[UnwantedLength + i + 1];
                     i++;
                 }
                 var j = 0;
                 while (j < MainStringLength-1)
                 {
                     if (thisArray[j] != ",")
                     {
                         FinalString += thisArray[j];
                     }
                     j++;
                 }
                 FinalString = "~" + FinalString;
                 alert(FinalString);
                 return FinalString;
             }
             else
             {
                 return HiddenPath;
             }
         }

здесь только для тестирования:

 $(document).ready(function () {
             FixPath("hakounaMatata:/7ekmaTa3mahaLaziz/FakePath/EnsaLmadiLiYghiz");
         });
// this will give you : ~/EnsaLmadiLiYghiz

Я столкнулся с той же проблемой. В IE8 его можно было бы обработать, создав скрытый ввод после управления вводом файлов. Заполните это значением его предыдущего брата. В IE9 это также исправлено.

Моя причина в том, чтобы узнать полный путь, заключалась в создании предварительного просмотра изображения javascript перед загрузкой. Теперь я должен загрузить файл, чтобы создать предварительный просмотр выбранного изображения.

Я использую объект FileReader на входе onchange для вашего типа входного файла! В этом примере используется функция readAsDataURL, и по этой причине у вас должен быть тег. Объект FileReader также имеет readAsBinaryString для получения двоичных данных, которые впоследствии могут быть использованы для создания того же файла на вашем сервере

Пример:

var input = document.getElementById("inputFile");
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
    var img = document.getElementById("yourImgTag");
    img.src = event.target.result;
}