Cara Upload Gambar Dengan AJAX

Lama sekali saya gak update blog ini..oke kli ini saya bakalan kasih Tutorial Upload Dengan Ajax.Mugkin Dari temen2 bloger lagi ada yang butihin tutorial ini..

Oke lansung saja :

"Cara Upload File Gambar Dengan Ajax Upload"

1.Bikin File Index.php

<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

<title>AJAX File Upload - Web Developer Plus Demos</title>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/ajaxupload.3.5.js" type="text/javascript"></script>
<link href="./styles.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
$(function(){
var btnUpload=$('#upload');
var status=$('#status');
new AjaxUpload(btnUpload, {
action: 'upload-file.php',
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
status.text('Only JPG, PNG or GIF files are allowed');
return false;
}
status.text('Uploading...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('
<li></li>
').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
} else{
$('
<li></li>
').appendTo('#files').text(file).addClass('error');
}
}
});

});
</script>
</head>
<body>
<div id="mainbody">
<h3>
» AJAX File Upload Form Using jQuery</h3>

<div id="upload">
<span>Upload File<span></span></span></div>
<span id="status"></span>

<ul id="files"></ul>
</div>
</body>
</html>

2.Selanjutnya Bikin File styles.css

#upload{
margin:30px 200px; padding:15px;
font-weight:bold; font-size:1.3em;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
background:#f2f2f2;
color:#3366cc;
border:1px solid #ccc;
width:150px;
cursor:pointer !important;
-moz-border-radius:5px; -webkit-border-radius:5px;
}
.darkbg{
background:#ddd !important;
}
#status{
font-family:Arial; padding:5px;
}
ul#files{ list-style:none; padding:0; margin:0; }
ul#files li{ padding:10px; margin-bottom:2px; width:200px; float:left; margin-right:10px;}
ul#files li img{ max-width:180px; max-height:150px; }
.success{ background:#99f099; border:1px solid #339933; }
.error{ background:#f0c6c3; border:1px solid #cc6622; }

3.Selanjutnya Bikin File upload-file.php

<?php
$uploaddir = './uploads/';
$file = $uploaddir . basename($_FILES['uploadfile']['name']);

if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
echo "success";
} else {
echo "error";
}
?>

4.Utuk Aksi File Uploadnya Silahkan Download

- JS DISINI

5.Bikin Folder Namanya Uploads

Fungsi dari folder ini adalah untuk menyimpan file gambar yang kita upload nanti.

Oke sekian Tutorial "Cara Upload File Gambar Dengan AJAX"

Semoga Bermanfaat Ya.. Jangan Lupa Comentnya..

Download Lengkap Disini

setelah Anda extrak tambahkan folder UPLOADS

Download Gratis Dan Tutorial Gratis