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

2018-06-18 05:17:56来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

 

CSS Code
  1. <style>  
  2. form { displayblockmargin20px autobackground#eeeborder-radius: 10pxpadding15px }  
  3. #progress { position:relativewidth:400pxborder1px solid #dddpadding1pxborder-radius: 3px; }  
  4. #bar { background-color#B4F5B4width:0%; height:20pxborder-radius: 3px; }  
  5. #percent { position:absolutedisplay:inline-blocktop:3pxleft: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.    
  6.    
  7.  <div id="progress">  
  8.         <div id="bar"></div>  
  9.         <div id="percent">0%</div >  
  10. </div>  
  11. <div id="message"></div>

 

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

 

PHP Code
  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. ?>  

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:本来运行的好的Ajax.dll怎么突然不起作用了

下一篇:Js获取Gridview中Dropdownlist选中状态