Tutorial Cara Mudah Upload Gambar Tanpa Reload
menggunakan ajax dan jquery
Bismillah
Kali ini yang akan kita bahas mengenai tekhnik
upload tekhnik upload ini juga merupakan suatu kebutuhan yang sering kita lihat
di aplikasi website entah itu untuk kebutuhan
gallery, foto profil atau pun untuk
artikel dengan fitur ini kita bisa
mengupload jenis file ataupun gambar dan foto
Secara default fitur yang di sediakan oleh html adalah
tombol upload secara statis, artinya proses upload tidak akan berjalan secara
belakang layar hal ini tentu sangat tidak efektif
untuk itu kita bahas tekhnik upload menggunakan ajax
sehingga bisa melakukan proses upload walaupun sedang menulis artikel ataupun
tanpa refresh reload halaman. ok langsung saja apa saja yang di butuhkan kita
membutuhkan file js untuk membuat proses dapat berjalan yaitu file jquery dan
ajaxupload
Pertama kita buat index.php kodenya seperti di bawah
<html>
<head>
<title>Upload
File</title>
<script
type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script
type="text/javascript"
src="js/ajaxupload.3.5.js"></script>
<link
rel="stylesheet" type="text/css"
href="css/Ajaxfile-upload.css" />
<script
type="text/javascript">
jQuery(document).ready(function(){
var
btnUpload=$('#me');
var
mestatus=$('#mestatus');
var
files=$('#files');
new
AjaxUpload(btnUpload, {
action:
'upload_file.php',
name:
'uploadfile',
onSubmit:
function(file, ext){
if (! (ext &&
/^(jpg|jpeg|png|bmp|gif)$/.test(ext))){
//
extension is not allowed
mestatus.text('Ekstensi
File tidak disupport');
return
false;
}
mestatus.html('<img
src="ajax-loader.gif" height="16"
width="16">');
},
onComplete:
function(file, response){
//On
completion clear the status
mestatus.text('');
//On
completion clear the status
files.html('');
//Add
uploaded file to list
if(response!=="error"){
$('<li></li>').appendTo('#files').html('<img
src="images/'+response+'" alt="" width="150"
style="border-radius: 10px; border: 3px solid #ccc"/><br
/>').addClass('success');
$('<li></li>').appendTo('#uploadfile').html('<input
type="hidden" name="filename"
value="'+response+'">').addClass('nameupload');
}
else{
$('<li></li>').appendTo('#files').text(file).addClass('error');
}
}
});
});
</script>
</head>
<body>
<form
method='POST' action='' enctype='multipart/form-data'>
<table
cellpadding="8" width="100%">
<tr
valign="top">
<td
width="130">Judul Halaman</td>
<td><input
type='text' name='page_title' size='50' placeholder="Judul Halaman"
style="background: #FFF; border: 1px solid #DDD; border-radius: 5px;
box-shadow: 0 0 5px #DDD inset; color:#666; outline: none; height: 30px; width:
266px; margin-right: 10px; padding: 5px;"></td>
</tr>
<tr
valign="top">
<td>Gambar</td>
<td>
<div
id="me" style="cursor:pointer; height: 40px; width:
72px;">
<label>
<button
class="button_profile">Browse</button>
</label>
</div>
<span
id="mestatus"> Recommend size is 640px x 480px</span>
<div
id="uploadfile">
<li
class="nameupload"></li>
</div>
<div
id="files">
<li
class="success"></li>
</div>
</td>
</tr>
<tr
valign="top">
<td>Deskripsi</td>
<td><textarea
name='description' style="background: #FFF; border: 1px solid #DDD;
border-radius: 5px; box-shadow: 0 0 5px #DDD inset; color:#666; outline: none;
height: 100px; width: 400px; margin-right: 10px; padding:
5px;"></textarea></td>
</tr>
</table>
<input
type='submit' name='upload' value="UPLOAD">
</form>
</body>
</html>
Kemudian buat file dengan nama upload_file.php
Skrip ini berfungsi untuk menerima file yang di
kirim oleh fille index.php dengan bantuan ajax dan jquery afar dapat melakukan
proses upload,gambar yang sudah di upload akan di simpan pada folder images
<?php
$uploaddir = 'images/';
$file = $uploaddir
.date('Ymdhis')."_".basename($_FILES['uploadfile']['name']);
$file_name =
date('Ymdhis')."_".$_FILES['uploadfile']['name'];
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'],
$file)) {
echo
"$file_name";
}
else {
echo
"error";
}
?>
Mungkin cukup sekian bahasan kali ini semoga
bermanfaat file lengkapnya silhkan download di sini
0 Komentar