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

Ajax 2020-05-25

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

演示

CSS Code
  1. <style>
  2. form{display:block;margin:20pxauto;background:#eee;border-radius:10px;padding:15px}
  3. #progress{position:relative;width:400px;border:1pxsolid#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

    <formid="myForm"action="upload.PHP"method="post"enctype="multipart/form-data">
  1. inputtype="file"size="60"name="myfile">
  2. inputtype="submit"value="AjaxFileUpload">
  3. </form>
  6. divid="progress">
  7. divid="bar"></div>
  8. divid="percent">0%</div>
  9. div>
  10. <div id="message"></div>

JavaScript Code

    <script>
  1. $(document).ready(function()
  2. {
  3. varoptions={
  4. beforeSend:function()
  5. $("#progress").show();
  6. //cleareverything
  7. $("#bar").width('0%');
  8. $("#message").html("");
  9. $("#percent").html("0%");
  10. },
  11. uploadProgress:function(event,position,total,percentComplete)
  12. $("#bar").width(percentComplete+'%');
  13. $("#percent").html(percentComplete+'%');
  14. success:function()
  15. {
  16. $("#bar").width('100%');
  17. $("#percent").html('100%');
  18. complete:function(response)
  19. $("#message").html("<fontcolor='green'>"+response.responseText+"</font>");
  20. error:function()
  21. $("#message").html("<fontcolor='red'>ERROR:unabletouploadfiles</font>");
  22. }
  23. };
  24. $("#myForm").ajaxForm(options);
  25. });
  26. </script>

upload.PHP

PHP Code

    <?PHP
  1. $output_dir="../upload/";
  2. if(isset($_FILES["myfile"]))
  3. //Filterthefiletypes,ifyouwant.
  4. if($_FILES["myfile"]["error"]>0)
  5. echo"Error:".$_FILES["file"]["error"]."<br>";
  6. else
  7. //movetheuploadedfiletouploadsfolder;
  8. move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$_FILES["myfile"]["name"]);
  9. echo"UploadedFile:".$_FILES["myfile"]["name"];
  10. }
  11. ?>


原文地址:http://www.freejs.net/article_biaodan_92.html

相关文章

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但...
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个...
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不...
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页...
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以...
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax...