Bagaimana untuk memuat naik fail tanpa borang menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk memuat naik fail tanpa borang menggunakan JavaScript?

PHPz

Lepaskan： 2023-09-09 23:45:03

ke hadapan

1449 orang telah melayarinya

如何使用 JavaScript 上传没有表单的文件？

Kadangkala, pembangun mungkin perlu memuat naik fail tanpa menggunakan borang JavaScript. Biasanya, kami membuat borang untuk mendapatkan data dan fail daripada pengguna, tetapi dalam tutorial ini, kami akan belajar mendapatkan fail daripada pengguna tanpa borang dan menghantarnya ke bahagian belakang.

Menggunakan objek FormData() dan permintaan Ajax

Objek FormData membolehkan kami menyimpan data borang dalam pasangan nilai kunci. Kita perlu menggunakan pembina untuk memulakan pembolehubah. Kami boleh membenarkan pengguna memuat naik fail menggunakan input HTML dan menyimpan fail tersebut dalam data borang. Kami kemudiannya boleh menghantar data borang ke bahagian belakang.

Tatabahasa

Pengguna boleh mengikut sintaks di bawah untuk memuat naik fail menggunakan objek FormData() dan permintaan ajax tanpa menggunakan borang.

form_data.append("file", uploadedFile);
$.ajax({
   url: "URL",
   method: "POST",
   data: form_data,
});

Salin selepas log masuk

Dalam sintaks di atas, kami menggunakan kaedah append() untuk menambah fail pada objek data borang. Selain itu, kami menggunakan ajax() untuk menghantar data ke API.

Contoh

Dalam contoh di bawah, kami telah mencipta input fail dalam HTML menggunakan teg . Dalam JavaScript, apabila pengguna memuat naik fail, kami mengaksesnya dan menambahkannya pada objek form_data.

Selepas itu, kami menghantar fail ke API melalui permintaan POST menggunakan ajax.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
   <h3>Using the <i>FormData object and ajax request</i> to upload a file without using the form data in JavaScript</h3>
   <input type = "file" name = "file" id = "file_input" />
   <div id = "content"> </div>
   <script>
      $(document).on('change', '#file_input', function () {
         let uploadedFile = document.getElementById('file_input').files[0];
         var form_data = new FormData();
         form_data.append("file", uploadedFile);
         $.ajax({
            url: "URL",
            method: "POST",
            data: form_data,
         });
      });
   </script>
</body>
</html>

Salin selepas log masuk

Muat naik pemalam mudah menggunakan jQuery

jQuery termasuk pemalam muat naik mudah yang boleh kami gunakan untuk menghantar fail ke API. Kita perlu menambah CDN pemalam muat naik mudah ke bahagian untuk menggunakannya. Jika pembangun menggunakan aplikasi, mereka boleh menggunakan arahan NPM untuk memasang pakej.

Tatabahasa

Pengguna harus mengikut sintaks berikut untuk memuat naik fail tanpa bentuk menggunakan JavaScript menggunakan pemalam Muat Naik Mudah jQuery.

$(this).simpleUpload("URL", {
   start: function (file) {
      
      //upload started
   },
});

Salin selepas log masuk

Dalam sintaks di atas, kami memanggil fungsi simpleUpload() bagi pemalam muat naik mudah untuk memuat naik fail.

Contoh

Dalam contoh di bawah, kami telah menambahkan laluan ke fail simpleUpload.min.js dalam bahagian . Kami menambah acara "perubahan" pada input fail. Dalam fungsi panggil balik, kami memanggil fungsi simpleUpload() dengan input fail sebagai rujukan. Kami memberikan objek ini sebagai parameter kedua fungsi simpleUpload() dengan kekunci dan fungsi panggil balik sebagai nilai.

<html>
<head> 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
   <script src= "https://cdn.jsdelivr.net/npm/jquery-simpleupload@1.1.0/simpleUpload.min.js"> </script>
</head>
<body>
   <h3>Using the <i>jQuery simple upload</i> plugin to upload the file without using the form</h3>
   <input type = "file" name = "file" id = "file_input">
   <div id = "content"> </div>
   <script>
      $('#file_input').change(function () {
         $(this).simpleUpload("abcd.php", {
            start: function (file) {
               
               //upload started
               content.innerHTML = "upload started";
            },
         });
      });
   </script>
</body>
</html>

Salin selepas log masuk

Pengguna mempelajari dua cara berbeza untuk memuat naik fail tanpa menggunakan borang dalam JavaScript. Kami menggunakan objek FormData dan kaedah ajax() dalam kaedah pertama. Dalam kaedah kedua, kami menggunakan pemalam muat naik mudah Jquery.

Atas ialah kandungan terperinci Bagaimana untuk memuat naik fail tanpa borang menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!