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

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了一个简单的ajax上传 上传进度显示，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本例用了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

原文链接：https://www.f2er.com/ajax/165577.html

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作