Tutorial ini akan memberikan contoh file yang diunggah pada klik tombol di php dropzone. Anda akan belajar mengunggah file php dropzone dengan mengirimkan tombol. Anda akan belajar mengunggah file dengan mengklik tombol di php dropzone. Kami akan menggunakan upload dropzone semua file pada klik tombol.
Kami selalu lebih suka menggunakan dropzone js untuk menyeret dan meletakkan beberapa file yang diunggah tetapi seperti yang kami tahu itu selalu mengunggah file ketika Anda memilih gambar atau file. jadi jika Anda perlu mengunggah gambar pada klik tombol kirim maka saya akan membantu Anda cara mengunggah semua file pada acara klik tombol menggunakan dropzone dan php.
Jadi, hari ini saya akan memberi Anda contoh Cara membuat beberapa file atau unggahan gambar menggunakan pustaka dropzone.js. Dalam contoh ini saya juga menggunakan bootstrap juga dengan cara itu kita bisa membangun tata letak yang lebih baik. Dalam tutorial ini Anda dapat melihat demo dari beberapa gambar yang diunggah dan juga mengunduh kode lengkap dari skrip ini. Anda hanya perlu melakukan beberapa langkah seperti yang tercantum di bawah ini:
1. Buat file index.php
2. Buat file upload.php
3. Buat folder unggahan
Dalam tiga langkah ini Anda bisa mendapatkan contoh lengkap dari pengunggahan gambar, Dalam contoh ini saya menggunakan dropzone.js cdn untuk impor, Anda juga dapat mengunduh di lokal Anda. Jadi mari kita lihat di bawah pratinjau dan ikuti langkah:
Pratinjau:
Langkah 1: Buat file index.php
Pada langkah pertama kita harus membuat file index.php di folder root kita dan menyalin kode di bawah ini dan memakai file itu. Dalam file ini saya menggunakan cdn untuk bootstrap, jquery, dropzone css dan js.
kami akan menulis event klik untuk tombol dan ketika Anda mengklik tombol itu kemudian dan kemudian gambar akan diunggah ke server.
Jadi mari kita ikuti:
index.php
<!DOCTYPE html>
<html>
<head>
<title>PHP Dropzone File Upload on Button Click Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>PHP Dropzone File Upload on Button Click Example</h2>
<form action="upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
<div>
<h3>Upload Multiple Image By Click On Box</h3>
</div>
</form>
<button id="uploadFile">Upload Files</button>
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(".dropzone", {
autoProcessQueue: false,
maxFilesize: 1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
});
$('#uploadFile').click(function(){
myDropzone.processQueue();
});
</script>
</body>
</html>Langkah 2: Buat file upload.php
Pada langkah pertama kita harus membuat file upload.php di folder root kita. Dalam file ini saya menulis kode folder unggah gambar.
upload.php
<?php
$uploadDir = 'uploads';
if (!empty($_FILES)) {
$tmpFile = $_FILES['file']['tmp_name'];
$filename = $uploadDir.'/'.time().'-'. $_FILES['file']['name'];
move_uploaded_file($tmpFile,$filename);
}
?>Langkah 3: Buat folder upload
Pada langkah terakhir, kita hanya perlu membuat folder "upload" untuk menyimpan gambar. Anda juga dapat memberikan nama yang berbeda dari unggahan, tetapi pastikan juga mengubah pada file unggahan.php.
Oke, sekarang kita siap menjalankan contoh ini, jadi jalankan saja perintah di bawah pada folder root untuk menjalankan proyek Anda.
php -S localhost:8000Sekarang Anda dapat membuka url di bawah ini di browser Anda:
http://localhost:8000Saya harap ini bisa membantu anda
dropzone upload php
andriajah