一个简单的ajax上传 上传进度显示_.NET_编程开发_程序员俱乐部

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

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>  

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.    
6.    
7.  <div id="progress">  
8.         <div id="bar"></div>  
9.         <div id="percent">0%</div >  
10. </div>  
11. <div id="message"></div>

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

 upload.php

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