Ketika pengguna memilih file di halaman web, saya ingin dapat mengekstrak nama file saja.
Saya memang mencoba fungsi str.search tetapi tampaknya gagal ketika nama filenya seperti ini: c: \ uploads \ ilike.this.file.jpg .
Bagaimana kita bisa mengekstrak nama file saja tanpa ekstensi?
Jawaban:
Dengan asumsi <input type = "file"> Anda memiliki id unggahan , semoga ini bisa membantu:
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('.'));Karena caranya akan gagal dengan ekstensi karakter lebih dari 3, jadi: .html, .jpeg dll.
var startIndex = Math.max(fullPath.lastIndexOf('\\'), fullPath.lastIndexOf('/')) + 1;
Untuk memisahkan string ({filepath} / {filename}) dan mendapatkan nama file Anda bisa menggunakan sesuatu seperti ini:
str.split(/(\\|\/)/g).pop()"Metode pop menghapus elemen terakhir dari array dan mengembalikan nilai tersebut ke pemanggil."
Jaringan Pengembang Mozilla
Contoh:
dari: "/home/user/file.txt".split(/(\\|\/)/g).pop()
Anda mendapatkan: "file.txt"
var filename = filepath.replace(/^.*?([^\\\/]*)$/, '$1');
[\\/]. Selain itu, ia juga diminta untuk menghapus ekstensi file. Untuk solusi lengkap, lihat: stackoverflow.com/a/32156800/19163
Saat ini ada cara yang jauh lebih sederhana:
var fileInput = document.getElementById('upload');
var filename = fileInput.files[0].name;fileInput.files.lengthsebelum menelepon .name, jika pengguna mengklik batal.
var pieces = str.split('\\');
var filename = pieces[pieces.length-1];Saya berasumsi bahwa Anda ingin menghapus semua ekstensi, yaitu /tmp/test/somefile.tar.gzuntuksomefile .
Pendekatan langsung dengan regex:
var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];Pendekatan alternatif dengan operasi regex dan array:
var filename = filepath.split(/[\\/]/g).pop().split('.')[0];Saya baru saja membuat versi saya sendiri. Fungsi saya dapat digunakan untuk mengekstrak apa pun yang Anda inginkan darinya, jika Anda tidak membutuhkan semuanya, maka Anda dapat dengan mudah menghapus beberapa kode.
<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>Akan menampilkan yang berikut:
Dengan && nOffset+1 === str.lengthditambahkan ke isDirectory:
Mengingat kasus uji, Anda dapat melihat fungsi ini bekerja cukup kuat dibandingkan dengan metode lain yang diusulkan di sini.
Catatan untuk pemula tentang \\: \ adalah karakter pelolosan, misalnya \ n berarti baris baru dan tab \ ta. Untuk memungkinkan penulisan \ n, Anda harus benar-benar mengetik \\ n.
&& eOffset < nOffset).
Masukan : C:\path\Filename.ext
Keluaran :Filename
Dalam kode HTML, atur nilai File onChangeseperti ini ...
<input type="file" name="formdata" id="formdata" onchange="setfilename(this.value)"/>Mengasumsikan id textfield Anda adalah '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>Tak satu pun dari jawaban yang sangat disukai benar-benar memberikan "hanya nama file tanpa ekstensi" dan solusi lainnya adalah kode yang terlalu banyak untuk pekerjaan sederhana seperti itu.
Saya pikir ini harus menjadi satu baris untuk setiap programmer JavaScript. Ini adalah ekspresi reguler yang sangat sederhana:
function basename(prevname) {
return prevname.replace(/^(.*[/\\])?/, '').replace(/(\.[^.]*)$/, '');
}Pertama, lepaskan apa pun hingga garis miring terakhir, jika ada.
Kemudian, lepaskan apa pun setelah periode terakhir, jika ada.
Sederhana, kuat, menerapkan persis apa yang diminta. Apakah saya melewatkan sesuatu?
// 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
}Tak satu pun dari jawaban di atas berfungsi untuk saya, berikut adalah solusi saya yang memperbarui input yang dinonaktifkan dengan nama file:
<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>Jika Anda menggunakan jQuery maka
$("#fileupload").val();