Використовуйте jQuery, щоб отримати вибране ім'я файлу без шляху

Я використав це:

$('input[type=file]').val()

щоб вибрати ім’я файлу, але він повернув повний шлях, як у "C: \ fakepath \ filename.doc". Частина "fakepath" насправді була там - не впевнений, чи це повинно бути, але це мій перший раз, коли я працюю з іменем завантаження файлів.

Як я можу просто отримати ім’я файлу (filename.doc)?

var filename = $('input[type=file]').val().split('\\').pop();

або ви могли просто зробити (адже це завжди C:\fakepathдодається з міркувань безпеки):

var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '')

Вам просто потрібно зробити код нижче. Перший [0] - це доступ до елемента HTML, а другий [0] - доступ до першого файлу завантаження файлу (я включив перевірку у разі відсутності файлу):

    var filename = $('input[type=file]')[0].files.length ? ('input[type=file]')[0].files[0].name : "";

Chrome повертається C:\fakepath\...з міркувань безпеки - веб-сайт не повинен отримувати інформацію про ваш комп'ютер, наприклад, шлях до файлу на вашому комп’ютері.

Щоб отримати лише частину назви файлу рядка, ви можете використовувати split()...

var file = path.split('\\').pop();

jsFiddle .

... або регулярний вираз ...

var file = path.match(/\\([^\\]+)$/)[1];

jsFiddle .

... або lastIndexOf()...

var file = path.substr(path.lastIndexOf('\\') + 1);

jsFiddle .

Розпочніть роботу з усіма ОС

var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, '');

Приклад

C:\fakepath\filename.doc 
/var/fakepath/filename.doc

Обидва повертаються

filename.doc
filename.doc

Ось як я це роблю, це працює досить добре.

У своєму HTML виконайте:

<input type="file" name="Att_AttributeID" onchange="fileSelect(event)" class="inputField" />

Потім у вашому js-файлі створіть просту функцію:

function fileSelect(id, e){
    console.log(e.target.files[0].name);
}

Якщо ви робите кілька файлів, ви також можете отримати список, переглянувши це:

e.target.files[0].name

можливо, якесь доповнення, щоб уникнути підробки:

var fileName = $('input[type=file]').val();
var clean=fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
alert('clean file name : '+ fileName);

Як щодо чогось подібного?

var pathArray = $('input[type=file]').val().split('\\');
alert(pathArray[pathArray.length - 1]);

Чи повинен це бути jquery? Або ви можете просто використовувати рідний JavaScript, yourpath.split("\\")щоб розділити рядок на масив?

Отримайте перший елемент з керування, а потім отримайте ім'я файлу, він ігнорує шлях до файлу на Chrome, а також внесе корекцію шляху для браузерів IE. Зберігаючи файл, ви повинні використовувати System.io.Path.GetFileNameметод, щоб отримати ім'я файлу лише для браузерів IE

var fileUpload    = $("#ContentPlaceHolder1_FileUpload_mediaFile").get(0); 
var files         =  fileUpload.files; 
var mediafilename = ""; 

for (var i = 0; i < files.length; i++) { 
  mediafilename = files[i].name; 
} 

<script type="text/javascript">

    $('#upload').on('change',function(){
       // output raw value of file input
       $('#filename').html($(this).val().replace(/.*(\/|\\)/, '')); 

        // or, manipulate it further with regex etc.
        var filename = $(this).val().replace(/.*(\/|\\)/, '');
        // .. do your magic

        $('#filename').html(filename);
    });
</script>

var filename=location.href.substr(location.href.lastIndexOf("/")+1);
alert(filename);

Ця альтернатива видається найбільш підходящою.

$('input[type="file"]').change(function(e){
        var fileName = e.target.files[0].name;
        alert('The file "' + fileName +  '" has been selected.');
});

Тут ви можете зателефонувати так. Нехай це мій елемент керування вхідними файлами

  <input type="file" title="search image" id="file" name="file" onchange="show(this)"  />

Тепер ось мій Jquery, який викликають, як тільки ви виберете файл

<script type="text/javascript">
    function show(input) {
        var fileName = input.files[0].name;
        alert('The file "' + fileName + '" has been selected.');               
            }

</script>

Ми також можемо видалити його за допомогою match

var fileName = $('input:file').val().match(/[^\\/]*$/)[0];
$('#file-name').val(fileName);