Используйте jQuery, чтобы получить файл с выбранным именем файла без пути

154

Я использовал это:

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

чтобы выбрать имя файла, но он вернул полный путь, как в "C: \ fakepath \ filename.doc". Часть "fakepath" была на самом деле там - не уверена, должна ли она быть, но я впервые работаю с именем файла загрузки файлов.

Как я могу просто получить имя файла (filename.doc)?

Marky
источник
11
Браузер меняет реальный путь, C:\fakepath\ чтобы вредоносные сайты не могли использовать javascript для сбора информации о структуре каталогов вашего компьютера.
Drudge

Ответы:

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

или вы можете просто сделать (потому что это всегда C:\fakepathдобавляется по соображениям безопасности):

var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '')
Manji
источник
1
Именно то, что мне было нужно, Манджи! Мне тоже нужно проверить расширение, поэтому я использовал ваш пример следующим образом: var extension = filename.split ('.'). Pop (); чтобы получить это тоже! Спасибо!
Марки
Это Fakepathс большой буквы F?
Алекс
16
@MikeDeSimone Я тестировал split ('\\'). Pop (); на Win 7, Ubuntu 11.04 и Mac OS X, и он прекрасно работает на всех из них.
Алекс
3
@ Алекс: Вау, это довольно безумно. Так что на самом деле это просто обходной путь для чьего-то плохого кода JS, который никогда не будет исправлен. Я запускаю Safari на Mac и вижу там «C: \ fakepath \». (Поиграйте с ним в jsfiddle .)
Майк ДеСимон,
1
@ VítorBaptista Файлы Windows не могут иметь обратной косой черты в своих именах. Это возможно в MacOS, хотя «вам следует избегать использования двоеточий и косой черты в именах файлов и папок, поскольку некоторые операционные системы и форматы дисков используют эти символы в качестве разделителей каталогов», как описано на веб-сайте Apple
joao.arruda
68

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

    var filename = $('input[type=file]')[0].files.length ? ('input[type=file]')[0].files[0].name : "";
Диего Котини
источник
1
При использовании этой опции нужно учитывать одну вещь: когда вы снова нажимаете кнопку «Выбрать файл», чтобы открыть окно открытия файла, а затем нажимаете кнопку выхода, появляется консольная ошибка.
luke_mclachlan
Да, вы правы, но намерение было поместить только код, чтобы получить имя, потому что, поскольку код получает имя из жестко закодированной позиции, было бы необходимо проверить, есть ли какой-то файл (для этого случая мы говорим в только один файл, но может иметь больше, и код должен будет повторяться по всем элементам). Но конечно, я собираюсь обновить код и включить эту проверку.
Диего Котини
23

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 .

Алекс
источник
21

Получить путь работы со всеми ОС

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

пример

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

Оба возвращаются

filename.doc
filename.doc
Kotzilla
источник
Код примера var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, '');использует jQuery.
Зарепет
13

Вот как я это делаю, это работает довольно хорошо.

В вашем 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
bartlss
источник
Поскольку идентификатор поля в этом контексте ничего не делает, функция в JS должна иметь на 1 параметр меньше, просто e вместо fileSelect (id, e) просто fileSelect (e). Хотя спасибо за решение :).
Джаспер Ланкхорст
8

может быть, какое-то дополнение для избежания поддельного пути:

var fileName = $('input[type=file]').val();
var clean=fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
alert('clean file name : '+ fileName);
vafrcor
источник
5

Как насчет этого?

var pathArray = $('input[type=file]').val().split('\\');
alert(pathArray[pathArray.length - 1]);
Бертран Маррон
источник
4

Это должно быть JQuery? Или вы можете просто использовать нативный JavaScript yourpath.split("\\")для разделения строки на массив?

GolezTrol
источник
3

Получите первый файл из элемента управления, а затем получите имя файла, он проигнорирует путь к файлу в 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; 
} 
Азар Шахазад
источник
2
<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>
настоящий вишал
источник
1
var filename=location.href.substr(location.href.lastIndexOf("/")+1);
alert(filename);
Мехул Рохасара
источник
1

Эта альтернатива кажется наиболее подходящей.

$('input[type="file"]').change(function(e){
        var fileName = e.target.files[0].name;
        alert('The file "' + fileName +  '" has been selected.');
});
Фишер Тирадо
источник
0

Здесь вы можете позвонить вот так Пусть это мой входной файл управления

  <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>
Дебендра Дэш
источник
0

Мы также можем удалить его, используя match

var fileName = $('input:file').val().match(/[^\\/]*$/)[0];
$('#file-name').val(fileName);
цедилка
источник