Коли користувач вибирає файл на веб-сторінці, я хочу мати змогу витягнути лише ім’я файлу.
Я спробував функцію 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()"Поп-метод видаляє останній елемент з масиву і повертає це значення абоненту."
Мережа розробників 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:
Зважаючи на тести, ви можете бачити, що ця функція працює досить надійно порівняно з іншими запропонованими тут методами.
Примітка для новачків про \\: \ символ втечі, наприклад \ n означає новий рядок та \ ta вкладку. Щоб дозволити писати \ n, потрібно фактично набрати \\ n.
&& eOffset < nOffset).
Вхід : 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();