php+ajax文件上传进度条

2016-01-29 11:26 76 1 收藏

php+ajax文件上传进度条,php+ajax文件上传进度条

【 tulaoshi.com - Javascript 】

 
代码分为以下部分:
demo.php - 上传过程处理
PLAIN TEXTPHP:
<?php
 
include ’UploadProgressMeter.class.php’;
 
$fileWidget = new UploadProgressMeter();
 
if ($fileWidget-uploadComplete()) {
        // 上传完毕的时候,从iframe发送一个js到主窗口表示一切ok
        echo $fileWidget-finalStatus();
 
        // 处理上传后的文件...
 
        exit;
}

demoserver.php - ajax的服务端js,使用Pear:HTML_AJAX,直接调用UploadProgressMeterStatus类
PLAIN TEXTHTML:

进度条的样式表
PLAIN TEXTCSS:
.progressBar {
  position: relative;
  padding: 2px;
  width: 300px;
  height: 40px;
  font-size: 14px;
}
.progressBar .background {
  border: solid 1px black;
  width: 270px;
  height: 20px;
}
.progressBar .bar {
  position: relative;
  background-color: blue;
  width: 0px;
  height: 20px;

表单部分
PLAIN TEXTHTML:
<form action="demo.php" method="post" enctype="multipart/form-data"renderFormExtra(); ?
<?php echo $fileWidget-renderHidden(); ?<div<?php echo $fileWidget-render(); ?
<?php echo $fileWidget-renderProgressBar(); ?</form 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/javascript/)

来源:http://www.tulaoshi.com/n/20160129/1482388.html

延伸阅读
标签: flash教程
1。首先在场景上画上一个长条状的进度条 2。选取这个进度条之后按 F8 把它转换成Movieclip影片,记得“注册点”必须在左边 3。转换成影片之后设定实例名 loader ,再来编辑这个影片 4。制作100个帧的的进度,然后增加一个图层并增加一个停止播放的指令 5。回到场景,在第一帧输入以下代码 6。在第二帧开始加入你们的...
《无尽的进度条Progress Quest》部分法术效果攻略 提示1:《无尽的进度条》 为半即时回合制游戏,即那种战斗开始后敌我都有行动条,走到头才能行动的回合制。 瞬移:有一定几率让你无视速度,立刻行动,几率随法术等级上升。 兔子的正义铁拳:召...
标签: flash教程
本文由 中国 txwh2006(踏雪无痕)   原创,转载请保留此信息! 这几天为了制作网页,需要做个进度条,无奈以前不注意,至今还不会做,只得看网上教程来学习。网上教程虽然不少,但其实版本雷同,真要学还不如意,有的教程号称“最简单”,他给你一段代码,叫你哭笑不得,人家会的高手,他也不在乎你一段代码,菜鸟们看了也不懂;...
带文字的进度条 作者:重庆建设集团一所 唐星彬 下载本文示例源代码 在下载安装的过程中,我们经常会看到带有文字的进度条,它能给人一种直观的概念。在VC中也有进度条的控件,但它不能显示文字。今有一CProgressCtrl类的派生类CTextProgressCtrl就有完成这样的工作。两种控件运行情况的对比如下: ...
标签: Web开发
CSS:  程序代码 style #graphbox{ border:1px solid #e7e7e7; padding:10px; width:250px; background-color:#f8f8f8; margin:5px 0; } #graphbox h2{ color:#666666; font-family:Arial; font-size:18px; font-weight:700; } .graph{ position:relative; background-color:#F0EFEF; border:1px solid #cccccc; padding:2px; font-size:1...

经验教程

10

收藏

10
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部