ajax jQ写的上传进度条

XML/HTML Code

 <form id="myForm" action="upload.php" method="post" enctype="multipart/form-data"> ?
<input type="file" size="60" name="myfile"> ?
<input type="submit" value="Ajax File Upload"> ?
</form> ?
<div id="progress"> ?
<div id="bar"></div> ?
<div id="percent">0%</div > ?
</div> ?
<div id="message"></div>

?

CSS Code

<style> ?
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px } ?
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; } ?
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; } ?
#percent { position:absolute; display:inline-block; top:3px; left:48%; } ?
</style>?

?

JavaScript Code?

<script> ?
$(document).ready(function() ?
{ ?
?? ?var options = {? ?
?? ?beforeSend: function()? ?
?? ?{ ?
?? ??? ?$("#progress").show(); ?
?? ??? ?//clear everything ?
?? ??? ?$("#bar").width(‘0%‘); ?
?? ??? ?$("#message").html(""); ?
?? ??? ?$("#percent").html("0%"); ?
?? ?}, ?
?? ?uploadProgress: function(event, position, total, percentComplete)? ?
?? ?{ ?
?? ??? ?$("#bar").width(percentComplete+‘%‘); ?
?? ??? ?$("#percent").html(percentComplete+‘%‘); ?
?
?? ? ?
?? ?}, ?
?? ?success: function()? ?
?? ?{ ?
?? ??? ?$("#bar").width(‘100%‘); ?
?? ??? ?$("#percent").html(‘100%‘); ?
?
?? ?}, ?
?? ?complete: function(response)? ?
?? ?{ ?
?? ??? ?$("#message").html("<font color=‘green‘>"+response.responseText+"</font>"); ?
?? ?}, ?
?? ?error: function() ?
?? ?{ ?
?? ??? ?$("#message").html("<font color=‘red‘> ERROR: unable to upload files</font>"); ?
?
?? ?} ?
?? ?? ?
};? ?
?
?? ? $("#myForm").ajaxForm(options); ?
?
});??? ?
</script>?

?
PHP Code

<?php ?
$output_dir = "../upload/"; ?
?
if(isset($_FILES["myfile"])) ?
{ ?
??? //Filter the file types , if you want. ?
??? if ($_FILES["myfile"]["error"] > 0) ?
??? { ?
????? echo "Error: " . $_FILES["file"]["error"] . "<br>"; ?
??? } ?
??? else ?
??? { ?
??????? //move the uploaded file to uploads folder; ?
??????? move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]); ?
???? ?
???? echo "Uploaded File :".$_FILES["myfile"]["name"]; ?
??? } ?
?
} ?
?>?
上一篇:HttpRunner3源码阅读:2. 模型定义


下一篇:Ubuntu-Mininet安装