Javascript – Как извлечь имя файла из элемента управления вводом файла

StackOverflow https://stackoverflow.com/questions/857618

  •  21-08-2019
  •  | 
  •  

Вопрос

Когда пользователь выбирает файл на веб-странице, я хочу иметь возможность извлечь только имя файла.

Я попробовал функцию str.search, но, похоже, она не удалась, если имя файла выглядит примерно так: c:\uploads\ilike.this.file.jpg.

Как мы можем извлечь только имя файла без расширения?

Это было полезно?

Решение

Предполагая, что ваш <тип ввода="файл" > имеет идентификатор загрузить надеюсь, это сработает:

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>

Выведет следующее:

  • Файл с именем «testcase1» имеет расширение:«jpeg» находится в каталоге:'C:\blabla\blaeobuaeu'
  • Файл с именем «testcase2» имеет расширение:«png» находится в каталоге:'/tmp/блаба'
  • Файл с именем «testcase3» имеет расширение:«htm» находится в каталоге:''
  • Каталог с именем «Testcase4» имеет расширение:'' находится в каталоге:'С:'
  • Каталог с именем «fileWithoutDots» имеет расширение:'' находится в каталоге:'/каталог.с.точками'
  • Каталог с именем '' имеет расширение:'' находится в каталоге:'/dir.with.dots/another.dir'

С && nOffset+1 === str.length Добавлено в isDirectory:

  • Файл с именем «testcase1» имеет расширение:«jpeg» находится в каталоге:'C:\blabla\blaeobuaeu'
  • Файл с именем «testcase2» имеет расширение:«png» находится в каталоге:'/tmp/блаба'
  • Файл с именем «testcase3» имеет расширение:«htm» находится в каталоге:''
  • Каталог с именем «Testcase4» имеет расширение:'' находится в каталоге:'С:'
  • Каталог с именем «fileWithoutDots» имеет расширение:'' находится в каталоге:'/каталог.с.точками'
  • Каталог с именем '' имеет расширение:'' находится в каталоге:'/dir.with.dots/another.dir'

Учитывая тестовые примеры, вы можете видеть, что эта функция работает довольно надежно по сравнению с другими предложенными здесь методами.

Примечание для новичков о \\:\ — escape-символ, например, означает новую строку, а — табуляцию.Чтобы можно было написать , вам нужно на самом деле ввести \ .

Я предполагаю, что вы хотите удалить все расширения, т.е. /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();
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top