Як вирішити C: \ fakepath?

<input type="file" id="file-id" name="file_name" onchange="theimage();">

Це моя кнопка завантаження.

<input type="text" name="file_path" id="file-path">

Це текстове поле, де я повинен показати повний шлях до файлу.

function theimage(){
 var filename = document.getElementById('file-id').value;
 document.getElementById('file-path').value = filename;
 alert(filename);
}

Це JavaScript, який вирішує мою проблему. Але в сигналі значення дає мені

C:\fakepath\test.csv 

і Mozilla дає мені:

test.csv

Але я хочу, щоб локальний повністю кваліфікований шлях до файлу . Як вирішити це питання?

Якщо це пов’язано з проблемою безпеки браузера, то яким повинен бути альтернативний спосіб це зробити?

Деякі браузери мають функцію захисту, яка не дозволяє JavaScript знати повноцінний шлях вашого файлу. Це має сенс - як клієнт, ви не хочете, щоб сервер знав файлову систему вашої локальної машини. Було б добре, якби це робили всі браузери.

Використовуйте

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

замість

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

Я використовую об'єкт 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;
}

Якщо ви перейдете до Internet Explorer, Інструментів, Інтернету, Безпеки, Користувальницького, знайдіть "Включити шлях до локального каталогу під час завантаження файлів на сервер" (це досить вниз) та натисніть "Увімкнути". Це спрацює

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

Я використовував <span> для представлення файлового вводу, щоб я міг застосувати відповідний стиль до <div> замість <input> (ще раз через IE). Тепер завдяки цьому IE хочу показати користувачеві шлях зі значенням, яке гарантовано поставити їх під охорону і, по крайней мере, побоюватися (якщо зовсім не відлякати їх!) ... БІЛЬШЕ IE-CRAP!

У будь-якому випадку, завдяки тим, хто розмістив пояснення тут: IE Browser Security: Додавання "fakepath" до файлу шляху вводу [type = "file"] , я зібрав другорядний фіксатор-верхній ...

У наведеному нижче коді є дві речі - він виправляє помилку lte 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);

Я зіткнувся з тією ж проблемою. У IE8 це можна було обійти, створивши прихований вхід після керування введенням файлу. Заповніть це значенням його попереднього брата. У IE9 це було також зафіксовано.

Моєю причиною бажати ознайомитися з повним шляхом було створити попередній перегляд зображення у JavaScript перед завантаженням. Тепер мені потрібно завантажити файл, щоб створити попередній перегляд вибраного зображення.

Якщо вам дійсно потрібно надіслати повний шлях вкладеного файлу, вам, мабуть, доведеться використовувати щось на зразок підписаного аплету Java, оскільки немає жодної можливості отримати цю інформацію, якщо браузер не надсилатиме її.

Здається, ви не можете знайти повний шлях у вашому localhost від js, але ви можете приховати підроблений шлях, щоб просто показати ім'я файлу. Використовуйте jQuery, щоб отримати вибране ім'я файлу без шляху

Використовуйте зчитувачі файлів:

$(document).ready(function() {
        $("#input-file").change(function() {
            var length = this.files.length;
            if (!length) {
                return false;
            }
            useImage(this);
        });
    });

    // Creating the function
    function useImage(img) {
        var file = img.files[0];
        var imagefile = file.type;
        var match = ["image/jpeg", "image/png", "image/jpg"];
        if (!((imagefile == match[0]) || (imagefile == match[1]) || (imagefile == match[2]))) {
            alert("Invalid File Extension");
        } else {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(img.files[0]);
        }

        function imageIsLoaded(e) {
            $('div.withBckImage').css({ 'background-image': "url(" + e.target.result + ")" });

        }
    }

Так, у моєму випадку я використовую середовище розробки asp.net, тому я хотів завантажити ці дані в запит на аякс asynchronus, у [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

Доповнення використання відповіді Сардеш Шарма:

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

Для повного шляху.