Free Tutorial
Forum Discussion
Miscellanous
Members Area
Tree View
Newest Scripts
Newest Templates
 |
 |
 |
 |
 |
 |
 |
 |
 |
Who's Online
 | Member | : 0 |
 | Guest | : 1 |
Newest User
| whiteforce |
| on 17th of July 2010 |
|
| kuman |
| on 11th of July 2010 |
|
| putri |
| on 09th of July 2010 |
|
| acchunk |
| on 20th of June 2010 |
|
| ISWAN |
| on 17th of June 2010 |
Web Statistic
 |
Today | : 62 |
|
This Month | : 1010 |
|
Total | : 80187 |
|
Total Hits | : 153531 |
| Member | : 357 |
|
Post Tutorial | : 35 |
|
Post Forum | : 56 |
|
Free Script | : 2 |
|
Free Templates | : 76 |
PHP Tutorial
Ajax File Uploader Share
by Administrator on 14 Jun 2009 - 13:18:31 lasted edit on 14 Jun 2009 - 13:58:47
Ajax File Uploader Share
by Administrator on 14 Jun 2009 - 13:18:31 lasted edit on 14 Jun 2009 - 13:58:47
Ajax File Uploader adalah sebuah aplikasi yang dibangun dengan teknologi Javascript dan PHP yang berguna untuk melakukan upload sebuah file baik berupa application file ataupun image file..
pertama buat file index.php
Tahap kedua kita membuat file upload.php untuk mengolah file yang diupload
Untuk mempercantik style'a, kita membuat file style.css
download file image untuk aplikasi ini, DOWNLOAD IMAGE
Thanks
pertama buat file index.php
Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX File Uploader</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
<!--
function startUpload(){
document.getElementById('f1_upload_process').style.visibility = 'visible';
document.getElementById('f1_upload_form').style.visibility = 'hidden';
return true;
}
function stopUpload(success){
var result = '';
if (success == 1){
result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
}
else {
result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
}
document.getElementById('f1_upload_process').style.visibility = 'hidden';
document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="myfile" type="file" size="30" /><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>';
document.getElementById('f1_upload_form').style.visibility = 'visible';
return true;
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="header"><div id="header_left"></div>
<div id="header_main">AJAX File Uploader</div><div id="header_right"></div></div>
<div id="content">
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
<p id="f1_upload_process">Loading...<br/><img src="loader.gif" /><br/></p>
<p id="f1_upload_form" align="center"><br/>
<label>File:
<input name="myfile" type="file" size="30" />
</label>
<label>
<input type="submit" name="submitBtn" class="sbtn" value="Upload" />
</label>
</p>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
</div>
<div id="footer"><a href="http://www.freetutorialwebsite.com" target="_blank">FreeTutorialWebsite.com</a></div>
</div>
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX File Uploader</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
<!--
function startUpload(){
document.getElementById('f1_upload_process').style.visibility = 'visible';
document.getElementById('f1_upload_form').style.visibility = 'hidden';
return true;
}
function stopUpload(success){
var result = '';
if (success == 1){
result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
}
else {
result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
}
document.getElementById('f1_upload_process').style.visibility = 'hidden';
document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="myfile" type="file" size="30" /><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>';
document.getElementById('f1_upload_form').style.visibility = 'visible';
return true;
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="header"><div id="header_left"></div>
<div id="header_main">AJAX File Uploader</div><div id="header_right"></div></div>
<div id="content">
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
<p id="f1_upload_process">Loading...<br/><img src="loader.gif" /><br/></p>
<p id="f1_upload_form" align="center"><br/>
<label>File:
<input name="myfile" type="file" size="30" />
</label>
<label>
<input type="submit" name="submitBtn" class="sbtn" value="Upload" />
</label>
</p>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
</div>
<div id="footer"><a href="http://www.freetutorialwebsite.com" target="_blank">FreeTutorialWebsite.com</a></div>
</div>
</body>
Tahap kedua kita membuat file upload.php untuk mengolah file yang diupload
Code :
<?php
$result = 0;
$target_path = getcwd().'upload/'.$_FILES['myfile']['name'];
if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
$result = 1;
}
sleep(1);
?>
<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>);</script>
$result = 0;
$target_path = getcwd().'upload/'.$_FILES['myfile']['name'];
if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
$result = 1;
}
sleep(1);
?>
<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>);</script>
Untuk mempercantik style'a, kita membuat file style.css
Code :
#container {
margin: auto;
width: 400px;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000033;
border-right-color: #000033;
border-bottom-color: #000033;
border-left-color: #000033;
background-color: #FFFFFF;
}
#container #header #header_left {
float: left;
background-image: url(images/header_left.gif);
background-repeat: no-repeat;
height: 42px;
width: 45px;
}
#container #header #header_right {
background-image: url(images/header_right.gif);
background-repeat: no-repeat;
height: 42px;
width: 6px;
float: right;
}
body {
padding-top: 30px;
background-color: #CCCCCC;
}
#container #content {
padding: 5px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #666666;
}
#container #footer {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
text-align: right;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: #999999;
border-right-color: #000033;
border-bottom-color: #000033;
border-left-color: #000033;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 5px;
}
#container #footer a {
color: #999999;
text-decoration: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#container #header #header_main {
float: left;
padding: 5px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.sbtn {
background-image: url(images/button.gif);
border: 1px solid #000033;
height: 22px;
width: 82px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
background-position: center;
padding: 0px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 20px;
}
button {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
height: 22px;
width: 82px;
background-image: url(images/button.gif);
}
#container #content #form1 legend {
padding: 5px;
margin: auto;
}
form {
margin: 10px 5px 0px 5px;
}
#container #header {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-image: url(images/header_bg.gif);
background-repeat: repeat-x;
height: 42px;
}
label {
padding: 0px;
text-align: center;
}
.msg {
text-align:left;
color:#666;
background-repeat: no-repeat;
margin-left:30px;
margin-right:30px;
padding:5px;
padding-left:30px;
}
.emsg {
text-align:left;
margin-left:30px;
margin-right:30px;
color:#666;
background-repeat: no-repeat;
padding:5px;
padding-left:30px;
}
#loader{
visibility:hidden;
}
#f1_upload_form{
height:100px;
}
#f1_error{
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
color:#FF0000;
}
#f1_ok{
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
color:#00FF00;
}
#f1_upload_form {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #666666;
}
#f1_upload_process{
z-index:100;
visibility:hidden;
position:absolute;
text-align:center;
width:400px;
}
margin: auto;
width: 400px;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000033;
border-right-color: #000033;
border-bottom-color: #000033;
border-left-color: #000033;
background-color: #FFFFFF;
}
#container #header #header_left {
float: left;
background-image: url(images/header_left.gif);
background-repeat: no-repeat;
height: 42px;
width: 45px;
}
#container #header #header_right {
background-image: url(images/header_right.gif);
background-repeat: no-repeat;
height: 42px;
width: 6px;
float: right;
}
body {
padding-top: 30px;
background-color: #CCCCCC;
}
#container #content {
padding: 5px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #666666;
}
#container #footer {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
text-align: right;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: #999999;
border-right-color: #000033;
border-bottom-color: #000033;
border-left-color: #000033;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 5px;
}
#container #footer a {
color: #999999;
text-decoration: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#container #header #header_main {
float: left;
padding: 5px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.sbtn {
background-image: url(images/button.gif);
border: 1px solid #000033;
height: 22px;
width: 82px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
background-position: center;
padding: 0px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 20px;
}
button {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
height: 22px;
width: 82px;
background-image: url(images/button.gif);
}
#container #content #form1 legend {
padding: 5px;
margin: auto;
}
form {
margin: 10px 5px 0px 5px;
}
#container #header {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-image: url(images/header_bg.gif);
background-repeat: repeat-x;
height: 42px;
}
label {
padding: 0px;
text-align: center;
}
.msg {
text-align:left;
color:#666;
background-repeat: no-repeat;
margin-left:30px;
margin-right:30px;
padding:5px;
padding-left:30px;
}
.emsg {
text-align:left;
margin-left:30px;
margin-right:30px;
color:#666;
background-repeat: no-repeat;
padding:5px;
padding-left:30px;
}
#loader{
visibility:hidden;
}
#f1_upload_form{
height:100px;
}
#f1_error{
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
color:#FF0000;
}
#f1_ok{
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
color:#00FF00;
}
#f1_upload_form {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #666666;
}
#f1_upload_process{
z-index:100;
visibility:hidden;
position:absolute;
text-align:center;
width:400px;
}
download file image untuk aplikasi ini, DOWNLOAD IMAGE
Thanks
Polling
Recent Comments
setiyo on Nostree v3.0
sorry bos, gw udah ikutin petunjuknya, dan download imagesnya, tapi prog nya gak berhasil, kalo boleh minta scriptnya untuk bisa di download, penasaran nich.....
Post : Saturday 05th of June 2010 04:59:26 AM
sorry bos, gw udah ikutin petunjuknya, dan download imagesnya, tapi prog nya gak berhasil, kalo boleh minta scriptnya untuk bisa di download, penasaran nich.....
Post : Saturday 05th of June 2010 04:59:26 AM
trinita on Ajax Password Checker
thnx u mas,, udh Q cb demonya, yg mo tnyain, Q dh nyoba inputin paswird dgn simbol n hrf bnyk kok msh weak yh??
yg nentuin kekuatan passwordny ntu drmnany c mas??
mohon bimbingannya.. Terimakasih sebelumnya..
Post : Tuesday 18th of May 2010 07:47:20 AM
thnx u mas,, udh Q cb demonya, yg mo tnyain, Q dh nyoba inputin paswird dgn simbol n hrf bnyk kok msh weak yh??
yg nentuin kekuatan passwordny ntu drmnany c mas??
mohon bimbingannya.. Terimakasih sebelumnya..
Post : Tuesday 18th of May 2010 07:47:20 AM
Administrator on Ajax Password Checker
mmm..mungkin ada yg salah dgn script saya itu, tp coba dites sekali lg, itu udah saya edit, semoga sudah bisa..
utk link demo'a klik disini :
http://www.freetutorialwebsite.com/demo/passcheck/
Post : Friday 23rd of April 2010 01:04:35 AM
mmm..mungkin ada yg salah dgn script saya itu, tp coba dites sekali lg, itu udah saya edit, semoga sudah bisa..
utk link demo'a klik disini :
http://www.freetutorialwebsite.com/demo/passcheck/
Post : Friday 23rd of April 2010 01:04:35 AM
trinita on Ajax Password Checker
mas dah Q coba kok ga bs yach..?? demonya jg ga adah..?? tlg ksh link demonya dunk...
thnx a lot b4...
Post : Wednesday 21st of April 2010 10:41:15 PM
mas dah Q coba kok ga bs yach..?? demonya jg ga adah..?? tlg ksh link demonya dunk...
thnx a lot b4...
Post : Wednesday 21st of April 2010 10:41:15 PM
trinita on Ajax Username Verification
ups, trnyta codenya adah dbwhnya mas, hehehe... efek ngantuk... dah bs c mas tp imagesny kok ga klwr yah klo usernamenya dh available..??
mohon bantuannya... thnx a lot b4...
Post : Wednesday 21st of April 2010 11:43:45 AM
ups, trnyta codenya adah dbwhnya mas, hehehe...
efek ngantuk... dah bs c mas tp imagesny kok ga klwr yah klo usernamenya dh available..??mohon bantuannya... thnx a lot b4...
Post : Wednesday 21st of April 2010 11:43:45 AM
Recent Post Forum
achmad.zaky on HTML Forum
halo pak,
saya mau tanya saya pada waktu saya pake command pint() , kenapa dicetak selalu dalam huruf yang kecil hanya 1/6 halaman . bagaimana agar cetakan bisa sesuai atau besar.
terima kasih
Post : Thursday 20th of May 2010 01:54:22 AM
halo pak,
saya mau tanya saya pada waktu saya pake command pint() , kenapa dicetak selalu dalam huruf yang kecil hanya 1/6 halaman . bagaimana agar cetakan bisa sesuai atau besar.
terima kasih
Post : Thursday 20th of May 2010 01:54:22 AM
tita89 on PHP Forum
aq member baru,,
mau tanya ni aq dpt tgs besar, buat sistem informasi yg dalemnya mau tak buat forum konsultasi (diskusi) kyk gini, tlg dung ksh source codenya,,, please..
yg lengkap... makasih ya,,
Post : Sunday 09th of May 2010 01:44:13 AM
aq member baru,,
mau tanya ni aq dpt tgs besar, buat sistem informasi yg dalemnya mau tak buat forum konsultasi (diskusi) kyk gini, tlg dung ksh source codenya,,, please..
yg lengkap... makasih ya,,
Post : Sunday 09th of May 2010 01:44:13 AM
Administrator on Lounge Forum
salam kenal juga mas Tedjo, ..
pengalaman saya, saya belajar web mulai dari HTML & CSS, terus lanjut ke Javascript & PHP, lanjut lagi PHP & Database, skrg ini saya sedang memperdalam ilmu Ajax & Jquery. Saya belajar web baru sekitar 2 tahun terakhir ini.
Untuk pembuatan website, biasanya berkisar 1-2 juta rupiah mas, tuh udah termasuk 1 domain & hosting yg standar.
tks
Post : Saturday 24th of April 2010 01:42:06 PM
salam kenal juga mas Tedjo, ..
pengalaman saya, saya belajar web mulai dari HTML & CSS, terus lanjut ke Javascript & PHP, lanjut lagi PHP & Database, skrg ini saya sedang memperdalam ilmu Ajax & Jquery. Saya belajar web baru sekitar 2 tahun terakhir ini.
Untuk pembuatan website, biasanya berkisar 1-2 juta rupiah mas, tuh udah termasuk 1 domain & hosting yg standar.
tks
Post : Saturday 24th of April 2010 01:42:06 PM
tejomoeljono on Lounge Forum
Perkenalkan saya Tedjo dari surabaya, mohon saranya bagaimana cara belajar dari pemula sampai dengan expert seperti anda, saya harus belajar mulai dari mana,saya pemula di dunia cyber,..oh ya sama tanya kalau dibantu buatkan website berapa ya, terus prosesnya bagaimana.
Thanks sebelumnya
Post : Friday 23rd of April 2010 04:31:57 AM
Perkenalkan saya Tedjo dari surabaya, mohon saranya bagaimana cara belajar dari pemula sampai dengan expert seperti anda, saya harus belajar mulai dari mana,saya pemula di dunia cyber,..oh ya sama tanya kalau dibantu buatkan website berapa ya, terus prosesnya bagaimana.
Thanks sebelumnya
Post : Friday 23rd of April 2010 04:31:57 AM
Administrator on PHP Forum
yup bro, tuh harus dibuat dulu DFD nya, supaya nantinya mudah kita implementasi ke pemrograman dan database..tentukan dulu mana entitasnya, kemudian relasinya...
klo kira2 DFD sudah siap, tidak susah dibuat ke database..misal ntar didatbase kita buat satu tabel dengan nama KRS, yang fieldnya terdiri dari :
- id_matkul
- id_mhs
- semester
utk tabel MHS, terdiri dari field :
- id_mhs
- nama
- alamat
- tlp
- dll
utk tabel MATKUL, terdiri dari field :
- id_matkul
- nama
- sks
Nah, kira-kira seperti itu bro, tp itu hanya contoh aja, masih ada beberapa tabel lagi yg perlu kita buat, tabel dosen misalnya dll..
semoga bermanfaat
tks
Post : Monday 19th of April 2010 12:39:36 AM
yup bro, tuh harus dibuat dulu DFD nya, supaya nantinya mudah kita implementasi ke pemrograman dan database..tentukan dulu mana entitasnya, kemudian relasinya...
klo kira2 DFD sudah siap, tidak susah dibuat ke database..misal ntar didatbase kita buat satu tabel dengan nama KRS, yang fieldnya terdiri dari :
- id_matkul
- id_mhs
- semester
utk tabel MHS, terdiri dari field :
- id_mhs
- nama
- alamat
- tlp
- dll
utk tabel MATKUL, terdiri dari field :
- id_matkul
- nama
- sks
Nah, kira-kira seperti itu bro, tp itu hanya contoh aja, masih ada beberapa tabel lagi yg perlu kita buat, tabel dosen misalnya dll..
semoga bermanfaat
tks
Post : Monday 19th of April 2010 12:39:36 AM
Our Banner
 |
