Dapatkan nama file gambar javascript

Diberi nama file yang juga berisi jalur file, tugasnya adalah mendapatkan nama file dari jalur lengkap. Ada beberapa metode untuk mengatasi masalah ini yang tercantum di bawah ini

JavaScript ganti () metode. Metode ini mencari string untuk nilai yang ditentukan, atau ekspresi reguler, dan mengembalikan string baru dengan nilai yang ditentukan yang diganti.  

Sintaksis

string.replace(searchVal, newvalue)

Parameter. Metode ini menerima dua parameter seperti yang disebutkan di atas dan dijelaskan di bawah ini

• searchVal. Parameter ini diperlukan. Ini menentukan nilai, atau ekspresi reguler, yang akan diganti dengan nilai baru
• nilai baru. Parameter ini diperlukan. Ini menentukan nilai yang akan diganti dengan nilai pencarian

Contoh. Contoh ini mendapatkan nama file dengan bantuan Regular Expression dengan menggunakan metode replace().  

html

<h1 style="color:green;">

string.split(separator, limit)

string.split(separator, limit)

string.split(separator, limit)

<

string.split(separator, limit)

string.split(separator, limit)

string.split(separator, limit)

string.split(separator, limit)

string.split(separator, limit)

string.split(separator, limit)

<

array.pop()

array.pop()

array.pop()

    <2

string.split(separator, limit)

array.pop()

string.split(separator, limit)

<

string.split(separator, limit)

string.split(separator, limit)

string.split(separator, limit)

string.split(separator, limit)

string.split(separator, limit)

<h18>

    style1

    ________29______3

    style5

style6style7

style8

    =0

=1

    =3

=4=5

    =7

string.split(separator, limit)

Keluaran

Bagaimana cara mendapatkan nama file dari jalur lengkap menggunakan JavaScript?

metode JavaScript split(). Metode ini digunakan untuk membagi string menjadi array substring, dan mengembalikan array baru.  

• Sintaksis

string.split(separator, limit)

Parameter. Metode ini menerima dua parameter seperti yang disebutkan di atas dan dijelaskan di bawah ini

• pemisah. Parameter ini opsional. Ini menentukan karakter, atau ekspresi reguler, yang akan digunakan untuk memisahkan string. Jika tidak digunakan, seluruh string akan dikembalikan (array dengan hanya satu item)
• membatasi. Parameter ini opsional. Ini menentukan bilangan bulat yang menentukan jumlah pemisahan, item di luar batas pemisahan akan dikeluarkan dari array

Metode JavaScript Array pop(). Metode ini menghapus elemen terakhir dari array, dan mengembalikan elemen yang dihapus.  

Sintaksis

array.pop()

Nilai pengembalian. Ini mengembalikan jenis apa pun, yang mewakili item array yang dihapus. Item ini bisa berupa string, angka, larik, boolean, atau jenis objek lainnya yang diperbolehkan dalam larik

Untuk alasan keamanan, browser tidak mengizinkan ini, mis. e. JavaScript di browser tidak memiliki akses ke Sistem File, namun menggunakan API File HTML5, hanya Firefox yang menyediakan properti mozFullPath, tetapi jika Anda mencoba untuk mendapatkan nilai, Firefox akan mengembalikan string kosong

Namun Anda bisa mendapatkan informasi lain tentang file yang diunggah seperti nama file, tanggal modifikasi terakhir, ukuran file (dalam byte) dan jenis file juga

Di bawah ini adalah output dari informasi file gambar ikon yang dipilih

terakhir diubah. 1666358381904
lastModifiedDate. Jum 21 Okt 2022 18. 49. 41 GMT+0530 (Waktu Standar India) {}
nama. “favicon. iko”
ukuran. 15406
Tipe. “gambar/ikon-x”
webkitRelativePath. “”

Dalam contoh output di atas Anda dapat melihat javascript telah mengembalikan beberapa informasi tetapi webkiteRelativePath kosong karena alasan keamanan (jadi tidak ada badan yang dapat menyebabkan masalah di sistem file sisi klien)

Di bawah ini adalah kode lengkap untuk mendapatkan jalur palsu yang dibuat secara otomatis, nama file yang diunggah, dan semua informasi file yang diperlukan menggunakan javascript

Kami telah membagi kode menjadi dua bagian bagian pertama memiliki semua kode html yang memiliki input kami untuk memilih file apa pun dari sistem file kami, dan setengah kode lainnya adalah kode JavaScript untuk menangani data informasi file membaca dan menampilkan pada halaman dan juga di

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Selected File Path Using JavaScript</title>
    <style>
        .center-component {
            font-family: arial;
            font-size: 24px;
            margin: 25px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="center-component">
        <h1>Upload File</h1>
        <input type="file" id="file" name="file" onchange="trigger(event)">
        <p id="fileName"></p>
        <p id="fullPath"></p>
    </div>

</body>

</html>

JavaScript

function trigger(event) {
    let file = event.target.value;
    let fileName = document.getElementById("fileName");
    let fullPath = document.getElementById("fullPath");

    let filename = file.replace(/^.*[\\\/]/, '')

    fullPath.innerHTML = `<span> File Full Path: ${file}</span>`;
    fileName.innerHTML = `<span> File Name: ${filename}</span>`;
    const files = event.target.files;
    console.log(files);
}

Seperti yang Anda lihat fungsi pemicu kami menggunakan parameter acara dan memanggil fungsi ini pada acara onchange sehingga fungsi pemicu dapat memperbarui informasi setiap saat

Setelah Anda menjalankan file html ke browser, Anda akan melihat langkah 1 di browser Anda

Pada langkah kedua Anda mengklik tombol Choose File dan kemudian muncul jendela baru seperti ini di mana Anda akan memilih file yang ingin Anda pilih, untuk mendapatkan informasi tentang

Setelah Anda memilih file apa pun, suatu peristiwa terjadi di latar belakang dan akan memperbarui layar Anda seperti pada langkah 3, Anda juga dapat memeriksa informasi file di konsol Anda

Untuk membuka console klik kanan pada jendela browser dan pilih inspect lalu pilih Console

Kode Lengkap

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Selected File Path Using JavaScript</title>
    <style>
        .center-component {
            font-family: arial;
            font-size: 24px;
            margin: 25px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="center-component">
        <h1>Upload File</h1>
        <input type="file" id="file" name="file" onchange="trigger(event)">
        <p id="fileName"></p>
        <p id="fullPath"></p>
    </div>


    <script>
        function trigger(event) {
            let file = event.target.value;
            let fileName = document.getElementById("fileName");
            let fullPath = document.getElementById("fullPath");

            let filename = file.replace(/^.*[\\\/]/, '')

            fullPath.innerHTML = `<span> File Full Path: ${file}</span>`;
            fileName.innerHTML = `<span> File Name: ${filename}</span>`;
            const files = event.target.files;
            console.log(files);
        }
    </script>
</body>

</html>

komentar Anda dihargai dan jika Anda ingin melihat artikel Anda di platform ini, silakan kirim email ke alamat ini kusingh@programmingeeksclub. com

Bagaimana cara mendapatkan nama gambar JavaScript?

Bagaimana cara menemukan nama file gambar?

Bagaimana cara mendapatkan nama file dari jalur file di JavaScript?

Bagaimana cara menemukan nama gambar dalam HTML?