一、index.php
二、upload.php
三、style/style.css
<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>
';
}
else {
result = '<span class="emsg">There was an error during file upload!<\/span>
';
}
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...
<img src="loader.gif" />
</p>
<p id="f1_upload_form" align="center">
<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.iklfy.com" target="_blank">Powered by Aimee</a></div>
</div>
</body>
<?php
// Edit upload location here
$destination_path = getcwd().DIRECTORY_SEPARATOR;
$result = 0;
$target_path = $destination_path . basename( $_FILES['myfile']['name']);
if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
$result = 1;
}
sleep(1);
?>
<script type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>);</script>
#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;
}
