About Me
Popular Posts
-
Pengenalan PHP Tutorial yang saya tulis kali ini berhubungan dunia website yang menggunakan bahasa PHP. Sebelum masuk ke tips dan trik PHP... -
Catatan Penting: Data yang dapat dijumlahkan harus berupa angka atau data string yang dapat diubah menjadi angka ( string yang terdiri ata...
-
Halo smua ,, kali ini saya akan membagikan bagaimana cara untuk membuat submit form atau proses dari suatu form dengan menggunakan Ajax Jqu...
Selasa, 02 April 2013
Tutorial Cara Upload Gambar Dengan AJAX PHP
23.11 | 
Diposting oleh
Suparno, M.Pd
Sebenarnya hal ini tidak beda jauh dengan cara mengupload foto dengan PHP, hanya saja dengan menggunakan ajax, maka cara kerjanya lebih cepat dan dinamis.
Tutorial Cara Upload Gambar dengan AJAX PHP akan
menggunakan cara yang sama dengan yang digunakan di tutorial tersebut,
ditambahan sedikit trik dan javascript. Untuk meng-upload gambar dengan
AJAX diperlukan bantuan <iframe>. Di tutorial upload gambar dengan PHP digunakan html form seperti di bawah:
- <!--form to upload file-->
- <form name="formupload" method="post" enctype="multipart/form-data" action="script/to/upload/file.php">
- Picture : <input name="picture" type="file" />
- <input type="submit" name="upload" value="Upload" />
- </form>
Perlu sedikit perubahan di html form yang digunakan untuk mengupload file seperti berikut:
- <iframe name="upload-frame" id="upload-frame" style="display:none;"></iframe>
- <form name="formupload" method="post" enctype="multipart/form-data" action="upload.php"
- target="upload-frame" onsubmit="startUpload();">
- Picture : <input name="picture" type="file" />
- <input type="submit" name="upload" value="Upload" />
- </form>
- <div id="uploaded-picture">
- <!-- div tempat photo yang telah diupload ditampilkan -->
- </div>
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript">
- function startUpload(){
- $("#uploaded-picture").html("loading...");
- }
- function displayPicture(pictureUrl){
- var img = new Image();
- $(img).load(function(){
- $(this).hide();
- $("#uploaded-picture").html($(this));
- $(this).fadeIn();
- }).attr('src', pictureUrl)
- .error(function(){
- alert("gagal menampilkan gambar");
- });
- }
- </script>
Di
baris 1 ditambahkan html tag <iframe> dengan atribut
name="upload-frame", id="upload-frame" dan menggunakan atribut
style="display:none;" agar <iframe> tersembunyi. Di bagian tag
<form>
baris 2 ditambahkan atribut target="upload-frame", atribut
target ini diisi dengan hal yang sama dengan atribut name"upload-frame"
dari tag <iframe>.
Baris 6 menambahkan tag <div/> tempat
menampilkan gambar yang telah diupload.
Baris 9 menambahkan javascript jquery.
Baris selanjutnya membuat dua function javascript, startUpload() untuk
menampilkan text loading saat gambar sedang diupload dan
displayPicture(pictureUrl) untuk menampilkan gambar setelah selesai
diupload.
Langkah selanjutnya yang perlu dilakukan adalah membuat script untuk mengupload file.
- <?php
- //file upload.php
- $fileName = $_FILES['picture']['name'];
- $fileSize = $_FILES['picture']['size'];
- $fileError = $_FILES['picture']['error'];
- $success = false;
- if($fileSize > 0 || $fileError == 0){
- $move = move_uploaded_file($_FILES['picture']['tmp_name'], 'photo/'.$fileName); //atau ke directory yang dinginkan
- if($move){
- $success = true;
- }
- }
- echo '<script type="text/javascript">';
- if($success){
- echo "parent.displayPicture('photo/$fileName');";
- }else{
- echo "alert('Upload gagal $fileError');";
- }
- echo '</script>';
- ?>
Jika file gagal
diupload maka akan ditampilkan alert dan jika file berhasil diupload
maka akan dipanggil function displayPicture().
Selamat Mencoba
Label:
Tutorial PHP
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar