Когда пользователь выбирает файл на веб-странице, я хочу иметь возможность извлечь только имя файла.
Я пробовал использовать функцию 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);
}filename = filename.substring(0, filename.lastIndexOf('.'));Потому что его способ потерпит неудачу с расширениями, состоящими из более чем 3 символов, например: .html, .jpeg и т. Д.
var startIndex = Math.max(fullPath.lastIndexOf('\\'), fullPath.lastIndexOf('/')) + 1;
Чтобы разделить строку ({filepath} / {filename}) и получить имя файла, вы можете использовать что-то вроде этого:
str.split(/(\\|\/)/g).pop()«Метод pop удаляет последний элемент из массива и возвращает это значение вызывающей стороне».
Сеть разработчиков Mozilla
Пример:
из: "/home/user/file.txt".split(/(\\|\/)/g).pop()
ты получаешь: "file.txt"
var filename = filepath.replace(/^.*?([^\\\/]*)$/, '$1');
[\\/]. Более того, попросили убрать и расширение файла. Для полного решения см .: stackoverflow.com/a/32156800/19163
В настоящее время существует более простой способ:
var fileInput = document.getElementById('upload');
var filename = fileInput.files[0].name;fileInput.files.lengthперед звонком .name, если пользователь нажал кнопку «Отмена».
var pieces = str.split('\\');
var filename = pieces[pieces.length-1];Я предполагаю , что вы хотите , чтобы лишить все расширения, то есть /tmp/test/somefile.tar.gzв somefile.
Прямой подход с регулярным выражением:
var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];Альтернативный подход с регулярным выражением и операцией с массивом:
var filename = filepath.split(/[\\/]/g).pop().split('.')[0];Я только что сделал свою версию этого. Моя функция может быть использована для извлечения из нее всего, что вы хотите, если вам не нужно все это, вы можете легко удалить некоторый код.
<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 означает новую строку и вкладку \ ta. Чтобы можно было писать \ n, вы должны набрать \\ n.
&& eOffset < nOffset).
Вход : C:\path\Filename.ext
Выход :Filename
В HTML-коде установите onChangeзначение File следующим образом ...
<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();