Melaksanakan Input Fail Dengan Salin-Tampal di Web-tutorial js-php.cn

Dalam bidang pembangunan web, terdapat pelbagai cara untuk memuat naik fail semasa mengumpul input pengguna. Salah satu kaedahnya ialah copy-paste. Salin-tampal untuk input fail ialah kaedah yang sangat intuitif untuk memuat naik fail daripada pengguna. Kaedah input fail salin-tampal melegakan pengguna daripada keperluan untuk menghafal lokasi fail yang ingin mereka muat naik. Dalam artikel ini, kami akan membincangkan cara anda boleh melaksanakan input fail dengan salin-tampal di tapak web anda.

Kami akan melaksanakan input fail salin-tampal dengan memanfaatkan antara muka ClipboadEvent dan EventTarget. Antara muka ClipboardEvent menyediakan maklumat tentang acara tampal dan antara muka EventTarget membolehkan kami mendengar acara tampal.

Semasa mendengar acara tampal, kami akan melampirkan fungsi pengendali acara di mana kami memutuskan perkara yang perlu dilakukan dengan item yang ditampal. Dalam kes kami, kami akan mengambil fail yang ditampal dan memberikannya serta-merta selepas ia dimuatkan sepenuhnya ke dalam penyemak imbas. Kami akan bermula dengan HTML dan gaya.

HTML dan Gaya

Mari kita mulakan dengan mencipta penanda HTML bagi kawasan tampal. Coretan kod di bawah ialah penanda HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy-Paste File Input</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div 
        id="pasteArea" 
        contenteditable="true" 
        style="border: 2px dashed #ccc; padding: 20px;"
    >
        Paste your file here
    </div>
    <div id="preview"></div>
    <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Coretan kod di atas memaparkan bekas segi empat tepat di mana kami akan dapat menampal fail di dalamnya. Bekas mempunyai atribut yang dipanggil contenteditable set to true. Atribut boleh diedit kandungan adalah penting untuk membolehkan penampalan fail atau mana-mana item lain dalam bekas. Jika atribut contenteditable ditukar kepada false atau dialih keluar, tindakan tampal tidak akan berfungsi seperti yang diharapkan. Kami juga mempunyai bekas dengan id pratonton. Kami akan menggunakan bekas pratonton untuk pratonton imej yang ditampal oleh pengguna.

Mari tambahkan beberapa gaya asas pada markup kami daripada style.css

*{
    font-family: Arial, Helvetica, sans-serif;
}

body{
    text-align: center;
    margin-block-start: 4rem;
}
#pasteArea {
    border: 2px dashed #ccc;
    padding: 20px;
    width: 300px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin: auto;
    color: rgb(5, 89, 89);
}

#preview img {
    max-width: 100%;
    margin-top: 10px;
}

Salin selepas log masuk

Penanda dan helaian gaya di atas mencipta bekas bersempadan sempang ringkas dengan teks gesaan ringkas seperti yang ditunjukkan dalam tangkapan skrin di bawah:

Implementing File Input By Copy-Paste on the Web

Sekarang kami telah mencipta UI, marilah kami menambah beberapa fungsi berguna dengan JavaScript dalam bahagian seterusnya.

Skrip

Dalam bahagian ini, kami akan menggunakan JavaScript untuk menambah pendengar acara tampal pada kawasan tampal. Sebelum kami mendapatkan kawasan tampal daripada DOM untuk melampirkan pendengar acara, kami terlebih dahulu menunggu kandungan DOM dimuatkan seperti dalam coretan kod di bawah.

document.addEventListener('DOMContentLoaded', () => {
    const pasteArea = document.querySelector('#pasteArea');

    pasteArea.addEventListener('paste', (event) => {

    });
});

Salin selepas log masuk

Dalam coretan kod di atas, kami telah menambah pendengar untuk acara DOMContentLoaded. Ini membolehkan kita menunggu pokok DOM dibuat sebelum kita boleh mendapatkan elemen DOM. Seterusnya, kami memilih bekas kawasan tampal dan tambahkan pendengar acara tampal padanya.

Mendapatkan fail daripada item yang ditampal

Pengendali acara tampal dibiarkan tanpa dilaksanakan dalam coretan kod sebelumnya. Mari kita laksanakannya dengan mendapatkan data daripada objek acara dan log masuk ke dalam konsol. Kami akan melakukan lebih banyak lagi dengan data kemudian dalam artikel, buat masa ini, kami hanya mahu memastikan fail diterima apabila item ditampal di kawasan tampal. Coretan kod di bawah menunjukkan pelaksanaan minimum pengendali acara tampal.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()

                console.log(file)
            }
        }
    })

Salin selepas log masuk

Dalam coretan kod di atas, kami mendapat item daripada objek event.clipboardData. Event.clipboardData.items ialah DataTransferItemList yang merupakan objek seperti senarai yang mengandungi kandungan item yang ditampal. Item disimpan dalam senarai kerana pengguna boleh menyalin dan menampal berbilang item sekaligus.

Seterusnya, kami mengulangi item menggunakan gelung untuk ...of. Dalam gelung, kami menyemak sama ada setiap item adalah fail. Jika item itu daripada 'fail' raja, kami mendapatkannya sebagai fail dan mencetaknya pada konsol penyemak imbas.

Mencetak maklumat fail pada konsol tidak begitu berguna kepada pengguna halaman web anda. Mari lakukan sesuatu yang lebih menarik dalam bahagian seterusnya.

Mempratonton fail yang dimuat naik

Adalah sukar bagi pengguna untuk mengetahui bahawa muat naik fail berjaya selepas menampal item untuk papan keratan jika kami tidak menunjukkannya di mana-mana. Adalah penting untuk menunjukkan bahawa fail telah berjaya dimuat naik dengan memaparkan sesuatu yang menunjukkan kejayaan. Apakah cara yang lebih baik untuk menunjukkan kejayaan muat naik daripada memaparkan fail yang dimuat naik itu sendiri?

Dalam bahagian ini, kami akan melanjutkan pengendali acara tampal untuk mencipta URL daripada fail yang diterima. Kami akan menggunakan URL yang dibuat untuk memaparkan fail setelah ia dimuatkan ke dalam penyemak imbas. Kami akan memanfaatkan API FileReader untuk membuat URL daripada fail seperti yang dikodkan dalam coretan di bawah.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()


                const reader = new FileReader();

                reader.onloadend = (e) => {
                    const url = e.target.result
                    console.log(url)

                };
                reader.readAsDataURL(file);
            }
        }
    });

Salin selepas log masuk

Dalam coretan kod di atas, kami telah mencipta tika FileReader dan menggunakannya untuk menjana URL data. Kami juga telah menambahkan pendengar acara loadend pada objek FileReader di mana kami log hasil bacaan ke konsol. Ini adalah langkah pertama untuk melihat pratonton fail, kini kami boleh menggunakan URL untuk memaparkan fail.

Assuming the user pasted image files, the following code snippet shows how we can extend the event handler to create a URL and display the image file.

 reader.onloadend = (e) => {
       const url = e.target.result
       const preview = document.querySelector('#preview')
       const img = document.createElement('img');

       img.src = url;
       preview.appendChild(img);
   };

Salin selepas log masuk

In the code snippet above, we get the preview container from the DOM and create an img element for rendering the image. We assign the created URL as the src of the image and append the image to the preview container. Once the image is appended to the preview container, the user can now know that the image they pasted was successfully loaded into the web page.

Success! We have successfully implemented file uploads by copy-paste on a webpage. This method of file upload gives users the privilege of uploading files easily without the need to click several buttons to select the file to be uploaded. The ClipboadEvent interface provides an easy way to collect data from items pasted on the browser. The FileReader interface allows us to create a URL from the uploaded file and use it to preview the uploaded file.

Feel free to say something in the comment section. Find more about the ClipBoardEvent and the FileReader interfaces from MDN.

Atas ialah kandungan terperinci Melaksanakan Input Fail Dengan Salin-Tampal di Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!