php+ajax文件上传进度条

ajax|上传

代码分为以下部分:

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:

<script src="http://www.ooso.net/demoserver.php?client=main,request,httpclient,dispatcher,json,util" type="text/javascript"></script>
<script src="http://www.ooso.net/demoserver.php?stub=UploadProgressMeterStatus" type="text/javascript"></script>
<?php echo $fileWidget->renderIncludeJs(); ?>

进度条的样式表

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(); ?></form><form action="demo.php" method="post" enctype="multipart/form-data"><label>Select File: </label>
<div><?php echo $fileWidget->render(); ?>
<?php echo $fileWidget->renderProgressBar(); ?></div>
</form>

demo下载 - 密码是www.ooso.net
作者的svn浏览

其它类似项目:
http://pdoru.from.ro/ - 要以patch的形式和php一起编译
http://www.ugia.cn/?p=54 - 以socket上传文件并显示进度条

时间: 2024-11-02 08:29:11

php+ajax文件上传进度条的相关文章

HTML5 Ajax文件上传进度条如何显示_AJAX相关

原本打算使用jquery插件进行异步文件上传,比如uploadfy但是需要额外的支持,也有人用iframe模仿异步上传机制,感觉都比较别扭.因为项目不考虑低版本浏览器,所以决定用html5实现.下面只是一个简单的demo,具体样式需要自己去做. 后台基于strut2进行文件处理,具体因项目而定.只是要注意设置文件大小的限制.  <constant name="struts.multipart.maxSize" value="52428800"/>这个配置

ajax文件上传进度条

ajax文件上传进度条页面:progressBar.jsp <%@ page contentType="text/html; charset=GBK" %> <html> <head> <title> Ajax进度条 </title> <script type="text/javascript"> //xmlHttpRequest对象 var xmlHttp; var key; //进度条颜色

基于HTML5 Ajax文件上传进度条如何实现(jquery版本)_AJAX相关

在上篇文章给大家介绍了这篇文章里面的后台Servlet.所以这里只看前台的JS代码. 首先HTML5用AJAX提交数据先要学习一个HTML5新增加的对象:FormData FormData 对象可以使用append 方法进行 key - value的数据添加,与以前我们常用的json不同的就是可以异步上传二进制文件. 1.FormDate对象的创建 var formData = new FormData(); 2.向 FormDate 对象添加数据 formData.append("catnam

基于HTML5 Ajax文件上传进度条如何实现(jquery版本)

在上篇文章给大家介绍了这篇文章里面的后台Servlet.所以这里只看前台的JS代码. 首先HTML5用AJAX提交数据先要学习一个HTML5新增加的对象:FormData FormData 对象可以使用append 方法进行 key - value的数据添加,与以前我们常用的json不同的就是可以异步上传二进制文件. 1.FormDate对象的创建 var formData = new FormData(); 2.向 FormDate 对象添加数据 formData.append("catnam

php ajax实现文件上传进度条_php技巧

本实例是关于php文件上传时进度条的实现,主要采用ajax技术,另外还运用了html5,有需要的朋友可以研究一下. 本实例有两个文件: upload_form.html: <!DOCTYPE html> <html> <head> <script> function _(el){ return document.getElementById(el); } function uploadFile(){ var file = _("file1"

js HTML5 Ajax实现文件上传进度条功能_javascript技巧

本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下 1.  lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name +

asp.net 文件上传进度条实现代码

asp教程.net 文件上传进度条实现代码 index.htm就是文件上传页面,提交form给uploadhandler目录下的default.aspx,以实现文件上传. progresshandler目录下三个文件为abort.ashx.genericguid.ashx,handler.ashx功能分别为:根据guid取消正在上传的文件,生成guid,根据guid获取上传信息. 第一步:建立index.htm页面,这个上传页面,需要注意的就是需要一个隐藏的iframe,并且名字为form提交的

服务器-我这样做asp.net异步文件上传进度条

问题描述 我这样做asp.net异步文件上传进度条 前台两个请求 1.上传文件的请求 2.获取上传进度的请求 1. $("#ufrm").ajaxSubmit({ url: "ReceivFile.ashx", type: "post", success: function (data) { ... 2. $.ajax({ type: "post", url: "Filepro.aspx", data: {

PHP利用APC模块实现文件上传进度条的方法_php技巧

本文实例讲述了PHP利用APC模块实现文件上传进度条的方法.分享给大家供大家参考.具体分析如下: 以前的php5.2之前的版本是不能可使用APC模块的,因为之前的压根就没有这个APC模块,如果想使用APC模块实现上传进度条我们必须是php5.2或更高版本. 从5.2开始APC加入了一个叫APC_UPLOAD_PROGRESS的东东,解决了困扰大家已久的进度条问题.并且它把原来的上传时把临时文件全部缓存到内存改成了当临时文件达到设定值时就自动保存到硬盘,有效地改善了内存利用状况. 它的作用原理是在