复制代码 代码如下:

<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\"];
}
}
?>