Когда пользователь выбирает файл на веб-странице, я хочу иметь возможность извлекать только имя файла.
Я попытался выполнить функцию str.search, но, похоже, это не сработает, когда имя файла выглядит примерно так: c:\uploads\ilike.this.file.jpg.
Как мы можем извлечь только имя файла без расширения?
Предполагая, что ваш < input type="file" > имеет идентификатор выгрузки, это, надеюсь, сделает трюк:
var fullPath = document.getElementById('upload').value;
if (fullPath) {
var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
var filename = fullPath.substring(startIndex);
if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
filename = filename.substring(1);
}
alert(filename);
}
Чтобы разделить строку ({filepath}/{filename}) и получить имя файла, вы можете использовать что-то вроде этого:
str.split(/(\\|\/)/g).pop()
"Метод pop удаляет последний элемент из массива и возвращает значение для звонящего. "
Сеть разработчиков Mozilla
Пример:
от: "/home/user/file.txt".split(/(\\|\/)/g).pop()
Вы получаете: "file.txt"
В настоящее время существует гораздо более простой способ:
var fileInput = document.getElementById('upload');
var filename = fileInput.files[0].name;
Очень просто
let file = $("#fileupload")[0].files[0];
file.name
Предполагая, что:
<input type="file" name="file1" id="theFile">
JavaScript будет:
var fileName = document.getElementById('theFile').files[0].name;
var pieces = str.split('\\');
var filename = pieces[pieces.length-1];
Я только что сделал свою собственную версию. Моя функция может быть использована для извлечения из нее того, что вы хотите от нее, если вам не нужно все это, тогда вы можете легко удалить какой-либо код.
<html>
<body>
<script type="text/javascript">
// Useful function to separate path name and extension from full path string
function pathToFile(str)
{
var nOffset = Math.max(0, Math.max(str.lastIndexOf('\\'), str.lastIndexOf('/')));
var eOffset = str.lastIndexOf('.');
if(eOffset < 0 && eOffset < nOffset)
{
eOffset = str.length;
}
return {isDirectory: eOffset === str.length, // Optionally: && nOffset+1 === str.length if trailing slash means dir, and otherwise always file
path: str.substring(0, nOffset),
name: str.substring(nOffset > 0 ? nOffset + 1 : nOffset, eOffset),
extension: str.substring(eOffset > 0 ? eOffset + 1 : eOffset, str.length)};
}
// Testing the function
var testcases = [
"C:\\blabla\\blaeobuaeu\\testcase1.jpeg",
"/tmp/blabla/testcase2.png",
"testcase3.htm",
"C:\\Testcase4", "/dir.with.dots/fileWithoutDots",
"/dir.with.dots/another.dir/"
];
for(var i=0;i<testcases.length;i++)
{
var file = pathToFile(testcases[i]);
document.write("- " + (file.isDirectory ? "Directory" : "File") + " with name '" + file.name + "' has extension: '" + file.extension + "' is in directory: '" + file.path + "'<br />");
}
</script>
</body>
</html>
Выведет следующее:
С && nOffset+1 === str.length добавлено к isDirectory:
С учетом тестовых примеров вы можете увидеть, что эта функция работает довольно эффективно по сравнению с другими предлагаемыми здесь методами.
Примечание для новичков о \\:\является escape-символом, например \n означает новую строку и \t вкладку. Чтобы сделать возможным запись \n, вы должны на самом деле ввести\\n.
Я предполагаю, что вы хотите удалить все расширения, т.е. /tmp/test/somefile.tar.gz до somefile.
Прямой подход с регулярным выражением:
var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];
Альтернативный подход с использованием регулярных выражений и массивов:
var filename = filepath.split(/[\\/]/g).pop().split('.')[0];
Вход: C:\path\Filename.ext
Вывод: Filename
В HTML-коде установите значение файла onChange следующим образом...
<input type="file" name="formdata" id="formdata" onchange="setfilename(this.value)"/>
Предполагая, что ваш идентификатор текстового поля - "wpName"...
<input type="text" name="wpName" id="wpName">
JavaScript
<script>
function setfilename(val)
{
filename = val.split('\\').pop().split('/').pop();
filename = filename.substring(0, filename.lastIndexOf('.'));
document.getElementById('wpName').value = filename;
}
</script>
Ни один из высокоподдерживаемых ответов фактически не предоставляет "просто имя файла без расширения", а другие решения - слишком много кода для такой простой работы.
Я думаю, что это должно быть однострочное приложение для любого программиста JavaScript. Это очень простое регулярное выражение:
function basename(prevname) {
return prevname.replace(/^(.*[/\\])?/, '').replace(/(\.[^.]*)$/, '');
}
Сначала разделите все до последней косой черты, если они есть.
Затем разделите что-нибудь после последнего периода, если оно есть.
Он прост, он прочен, он реализует именно то, что просил. Я что-то пропустил?
// HTML
<input type="file" onchange="getFileName(this)">
// JS
function getFileName(input) {
console.log(input.files[0].name) // With extension
console.log(input.files[0].name.replace(/\.[^/.]+$/, '')) // Without extension
}
Ни один из вышеперечисленных ответов не работал у меня, вот мое решение, которое обновляет отключенный ввод с именем файла:
<script type="text/javascript">
document.getElementById('img_name').onchange = function () {
var filePath = this.value;
if (filePath) {
var fileName = filePath.replace(/^.*?([^\\\/]*)$/, '$1');
document.getElementById('img_name_input').value = fileName;
}
};
</script>
Если вы используете jQuery, то
$("#fileupload").val();
var path = document.getElementById('upload').value;//take path
var tokens= path.split('\\');//split path
var filename = tokens[tokens.length-1];//take file name