一个简单的ajax上传进度显示示例

　　<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>

　　<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>

　　<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

　　$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"];

　　}

　　}

　　?>