Upload Image to Server With Javascript Ajax
Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English commodity)
Saya tidak bisa mencapai akhir hal menyenangkan yang dapat Anda lakukan dengan teknologi web yang muncul. Hari ini, saya akan menunjukkan kepada Anda bagaimana melakukan sesuatu itu—sampai saat terakhir—hampir tidak pernah terjadi sebelumnya: mengunggah file melalui AJAX.
Oh, tentu, ada hack; tapi jika Anda seperti saya, dan merasa kotor setiap kali Anda mengetik iframe, Anda akan sangat menyukai ini. Bergabunglah dengan saya setelah lompatan ini!
Mencari Solusi Cepat?
Jika Anda mencari solusi cepat, ada banyak kumpulan skrip dan aplikasi unggahan file di Envato Market place.
HTML5 file uploader ini sangat bagus — Anda dapat menambahkan file dengan mudah dengan menyeret dan menjatuhkannya atau mengkliknya. Semua file akan diupload melalui AJAX atau dapat ditambahkan dalam form, dan file dapat diganti namanya sebelum diunggah. Solusi hebat dan cepat jika itu yang Anda cari!
Kenapa kita tidak mendapat kabar buruknya?
Ini tidak bekerja di setiap browser. Namun, dengan beberapa peningkatan progresif (atau apa pun kata kunci saat ini), kita akan memiliki halaman unggahan yang akan berfungsi kembali ke IE6 (walaupun tanpa potongan AJAX).
Unggahan AJAX kita akan bekerja selama
FormDatatersedia; jika tidak, pengguna akan mendapatkan unggahan normal.
Ada tiga komponen utama untuk proyek kita.
- Atribut
multiplepada elemeninputfile. - Objek
FileReaderdari File API yang baru. - Objek
FormDatadari XMLHttpRequest2.
Kita menggunakan atribut multiple untuk memungkinkan pengguna memilih beberapa file untuk diunggah (beberapa upload file akan bekerja normal meski FormData tidak tersedia). Seperti yang akan Anda lihat, FileReader memungkinkan kita menampilkan thumbnail pengguna dari file yang mereka unggah (kita akan mengharapkan gambar).
Tak satu pun dari tiga fitur kita bekerja di IE9, jadi semua pengguna IE akan mendapatkan pengalaman mengunggah yang normal (walaupun saya mengerti dukungan untuk `FileReader` tersedia di IE10 Dev Preview 2). FileReader tidak bekerja di Safari versi terbaru (5.1), jadi mereka tidak akan mendapatkan thumbnail, tapi mereka akan mendapatkan unggahan AJAX dan pesan konfirmasi. Akhirnya, Opera 10.l memiliki dukungan FileReader namun tidak mendukung FormData, jadi mereka akan mendapatkan thumbnail, tapi unggahan normal.
Dengan itu semua, mari kita mengkode!
Langkah i: Markup dan Gaya
Mari kita mulai dengan beberapa markup dan gaya dasar. Tentu saja, ini bukan bagian utama dari tutorial ini, saya tidak akan memperlakukan Anda seperti newbie.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-eight" /> <title>HTML5 File API</championship> <link rel="stylesheet" href="style.css" /> </caput> <body> <div id="main"> <h1>Upload Your Images</h1> <form method="mail service" enctype="multipart/course-data" action="upload.php"> <input type="file" proper noun="images" id="images" multiple /> <push blazon="submit" id="btn">Upload Files!</button> </form> <div id="response"></div> <ul id="image-listing"> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/i.6.2/jquery.min.js"></script> <script src="upload.js"></script> </body> </html>
Cukup mendasar, ya? Kitai punya form yang mengirim ke upload.php, yang akan kita lihat sebentar lagi, dan satu elemen input tunggal, dari type file. Perhatikan bahwa ada beberapa atribut boolean multiple, yang memungkinkan pengguna untuk memilih beberapa file sekaligus.
Itu benar-benar semua ada untuk dilihat di sini. Mari kita lanjutkan.
CSS
body { font: 14px/1.v helvetica-neue, helvetica, arial, san-serif; padding:10px; } h1 { margin-elevation:0; } #master { width: 300px; margin:auto; background: #ececec; padding: 20px; border: 1px solid #ccc; } #prototype-list { listing-style:none; margin:0; padding:0; } #image-list li { background: #fff; edge: 1px solid #ccc; text-align:center; padding:20px; margin-bottom:19px; } #prototype-list li img { width: 258px; vertical-align: middle; edge:1px solid #474747; } Sama sekali tidak ada kejutan di sini.
Langkah 2: PHP
Kita juga harus bisa menangani unggahan file di back terminate juga, jadi mari kita bahas selanjutnya.
upload.php
<?php foreach ($_FILES["images"]["mistake"] every bit $key => $mistake) { if ($mistake == UPLOAD_ERR_OK) { $name = $_FILES["images"]["proper name"][$primal]; move_uploaded_file( $_FILES["images"]["tmp_name"][$fundamental], "uploads/" . $_FILES['images']['name'][$central]); } } echo "<h2>Successfully Uploaded Images</h2>"; Ingatlah bahwa ini adalah baris pertama PHP yang telah saya tulis dengan mudah dalam setahun (saya orang pengguna Ruby). Anda mungkin harus melakukan sedikit lebih untuk keamanan; namun, kita hanya memastikan bahwa tidak ada kesalahan pengunggahan. Jika demikian, kita menggunakan move_uploaded_file bawaan untuk memindahkannya ke binder uploads. Jangan lupa untuk memastikan bahwa binder itu writeable.
Jadi, sekarang, kita akan memiliki class unggahan yang berfungsi. Anda memilih gambar (beberapa, jika Anda mau dan browser Anda mengizinkan Anda), klik tombol "Upload Files!", dan Anda mendapat pesan "Successfully Uploaded Images."
Inilah proyek mini kita sejauh ini:
Tapi, ayolah, ini tahun 2011: kita ingin lebih dari itu. Anda akan melihat bahwa kita telah menghubungkan jQuery dan file upload.js. Mari kita bedah sekarang.
Langkah 3: JavaScript
Jangan buang waktu: ini dia!
(part () { var input = certificate.getElementById("images"), formdata = false; if (window.FormData) { formdata = new FormData(); certificate.getElementById("btn").style.display = "none"; } }(); Inilah yang kita mulai. Kita membuat dua variabel: input adalah elemen masukan file kita; formdata akan digunakan untuk mengirim gambar ke server jika browser mendukungnya. Kita menginisialisasinya ke simulated dan kemudian memeriksa untuk melihat apakah browser mendukung FormData; jika ya, kita membuat objek FormData baru. Juga, jika kita bisa mengirimkan gambar dengan AJAX, kita tidak memerlukan tombol "Upload Images!", jadi kita bisa menyembunyikannya. Kenapa kita tidak membutuhkannya? Nah, kita akan secara otomatis mengunggah gambar segera setelah pengguna memilihnya.
Sisa dari JavaScript akan masuk ke dalam fungsi anonim yang berjalan sendiri milik Anda. Kita selanjutnya membuat fungsi pembantu kecil yang akan menampilkan gambar setelah browser memilikinya:
function showUploadedItem (source) { var list = document.getElementById("image-list"), li = certificate.createElement("li"), img = document.createElement("img"); img.src = source; li.appendChild(img); list.appendChild(li); } Fungsi mengambil satu parameter: sumber gambar (kita akan melihat bagaimana kita mendapatkannya segera). Kemudian, kita hanya menemukan daftar di markup kita dan membuat daftar particular dan gambar. Kita atur sumber gambar ke sumber yang kita terima, letakkan gambar di daftar item, dan letakkan item daftar dalam daftarnya. Voila!
Selanjutnya, kita harus benar-benar mengambil gambar, menampilkannya, dan mengunggahnya. Seperti yang telah kami katakan, kita akan melakukan ini saat kejadian onchange dijalankan pada elemen input.
if (input.addEventListener) { input.addEventListener("alter", function (evt) { var i = 0, len = this.files.length, img, reader, file; document.getElementById("response").innerHTML = "Uploading . . ." for ( ; i < len; i++ ) { file = this.files[i]; if (!!file.type.match(/paradigm.*/)) { } } }, fake); } Kita tidak perlu khawatir tentang model upshot milik IE, karena IE9+ mendukung fungsi addEventListener standar.
Masih ada lagi, tapi mari kita mulai dengan ini. Pertama, kita tidak perlu khawatir tentang model result milik IE, karena IE9+ mendukung fungsi addEventListener standar (dan IE9 dan ke bawah tidak mendukung fitur baru kita).
Jadi, apa yang ingin kita lakukan bila pengguna telah memilih file? Pertama, kita membuat beberapa variabel. Satu-satunya yang penting saat ini adalah len = this.files.length. File yang telah dipilih pengguna akan dapat diakses dari objek this.files. Saat ini, kita hanya peduli dengan properti length, jadi kita bisa mengulang file-file …
… itulah yang akan kita lakukan selanjutnya. Di dalam perulangan, kita mengatur file saat ini untuk mengajukan kemudahan akses. Hal selanjutnya yang kita lakukan adalah mengonfirmasi bahwa file itu adalah gambar. Kita bisa melakukan ini dengan membandingkan properti blazon dengan sebuah regular expression. Kita mencari type yang dimulai dengan "paradigm" dan diikuti oleh apapun. (Double-bang di depan hanya mengubah hasilnya ke boolean.)
Jadi, apa yang kita lakukan jika kita memiliki gambar di tangan kita?
if ( window.FileReader ) { reader = new FileReader(); reader.onloadend = function (e) { showUploadedItem(e.target.result); }; reader.readAsDataURL(file); } if (formdata) { formdata.append("images[]", file); } Kita memeriksa untuk melihat apakah browser mendukung pembuatan objek FileReader. Jika ya, kita akan membuatnya.
Begini cara kita menggunakan objek FileReader: Kita akan mengirimkan file kita ke metode reader.readAsDataURL. Ini membuat url information untuk gambar yang diunggah. Itu tidak sesuai dengan harapan Anda. Url information tidak dikirimkan kembali dari fungsinya. Sebagai gantinya, url data akan menjadi bagian dari objek event.
Dengan pemikiran itu, kita perlu mendaftarkan sebuah fungsi pada event reader.onloadend. Fungsi ini mengambil objek event, dengan dimana kita mendapatkan url data: itu ada di e.target.effect (ya, due east.target adalah objek reader, tapi saya punya masalah saat menggunakan reader menggantikan e.target di dalam fungsi ini). Kita hanya akan mengirimkan url data ini ke fungsi showUploadedItem kita (yang kita tulis di atas).
Selanjutnya, kita periksa untuk objek formdata. Ingat, jika browser mendukung FormData, formdata akan menjadi objek FormData; jika tidak, itu akan imitation. Jadi, jika kita memiliki objek FormData, kita akan memanggil metode append. Tujuan dari objek FormData adalah untuk menampung nilai yang Anda kirimkan melalui course; jadi, metode suspend hanya mengambil kunci dan nilai. Dalam kasus kita, kunci kita adalah images[]; dengan menambahkan tanda kurung siku di akhir, kita memastikan setiap kali kita append nilai lain, kita sebenarnya menambahkannya ke array itu, alih-alih menimpa properti image.
Kita hampir selesai. Di dalam loop kita, kita telah menampilkan setiap gambar untuk pengguna dan menambahkannya ke objek formdata. Sekarang, kita hanya perlu mengunggah gambarnya. Di luar loop for, inilah bagian terakhir dari teka-teki kita:
if (formdata) { $.ajax({ url: "upload.php", type: "POST", data: formdata, processData: simulated, contentType: false, success: office (res) { document.getElementById("response").innerHTML = res; } }); } Sekali lagi, kita harus memastikan bahwa kita memiliki dukungan FormData; jika tidak, tombol "Upload Files!" akan terlihat, dan begitulah cara pengguna mengunggah foto. Namun, jika kita memiliki dukungan FormData, kita akan menangani pengunggahan melalui AJAX. Kita menggunakan jQuery untuk menangani semua keanehan AJAX di seluruh browser.
Anda mungkin sudah familiar dengan metode $.ajax jQuery: Anda memberinya pilihan objek. Properti url, type, dan success sudah jelas. Properti data adalah objek formdata kita. Perhatikan properti processData dan contentType tersebut. Menurut dokumentasi jQuery, processData adalah truthful secara default, dan akan memproses dan mengubah information menjadi query cord. Kita tidak ingin melakukan itu, jadi kita menetapkan ke simulated. Kita juga menyetel contentType ke false untuk memastikan information tersebut masuk ke server sesuai harapan.
Dan hanya itu. Sekarang, ketika pengguna memuat halaman, mereka melihat ini:
Dan setelah mereka memilih gambar, mereka akan melihat ini:
Dan gambarnya telah diunggah:
Merangkum!
Mengunggah file melalui AJAX cukup keren, dan bagus sekali bahwa teknologi baru ini mendukungnya tanpa memerlukan hack yang panjang. Jika Anda memiliki pertanyaan tentang apa yang telah kita lakukan di sini, tekan komentar tersebut! Terima kasih banyak telah membaca!
Dan jika Anda masih memerlukan bantuan untuk masalah ini atau masalah pengkodean lainnya, temukan dukungan di Envato Studio.
Source: https://code.tutsplus.com/id/tutorials/uploading-files-with-ajax--net-21077
0 Response to "Upload Image to Server With Javascript Ajax"
Post a Comment