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

本例用了jquery.form.js请到演示页面查看

CSS Code

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

XML/HTML Code

1. <form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">
2. <input type="file" size="60" name="myfile">
3. <input type="submit" value="Ajax File Upload">
4. </form>
5. <div id="progress">
6. <div id="bar"></div>
7. <div id="percent">0%</div >
8. </div>
9. <div id="message"></div>

JavaScript Code

1. <script>
2. $(document).ready(function()
3. {
4. var options = {
5. beforeSend: function()
6. {
7. $("#progress").show();
8. //clear everything
9. $("#bar").width('0%');
10. $("#message").html("");
11. $("#percent").html("0%");
12. },
13. uploadProgress: function(event, position, total, percentComplete)
14. {
15. $("#bar").width(percentComplete+'%');
16. $("#percent").html(percentComplete+'%');
17. },
18. success: function()
19. {
20. $("#bar").width('100%');
21. $("#percent").html('100%');
22. },
23. complete: function(response)
24. {
25. $("#message").html("<font color='green'>"+response.responseText+"</font>");
26. },
27. error: function()
28. {
29. $("#message").html("<font color='red'> ERROR: unable to upload files</font>");
30. }
31. };
32. $("#myForm").ajaxForm(options);
33. });
34. </script>

upload.php

PHP Code

1. <?php
2. $output_dir = "../upload/";
3. if(isset($_FILES["myfile"]))
4. {
5. //Filter the file types , if you want.
6. if ($_FILES["myfile"]["error"] > 0)
7. {
8. echo "Error: " . $_FILES["file"]["error"] . "<br>";
9. }
10. else
11. {
12. //move the uploaded file to uploads folder;
13. move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);
14. echo "Uploaded File :".$_FILES["myfile"]["name"];
15. }
16. }
17. ?>