利用uploadprogress实现上传进度条

最新推荐文章于 2024-09-04 22:20:02 发布
最新推荐文章于 2024-09-04 22:20:02 发布
阅读量4.1k 收藏
点赞数
分类专栏： php 文章标签： upload function file server 扩展 border

,继上次运用了uploadprogress上传扩展，自己弄了一个简单的实例，实现原理和apc实现的方法基本一样。
1.安装php_uploadprogress.dll扩展,重启apache
2.实现代码以下：
upload.php

PHP Code 复制内容到剪贴板
  1. <?php  
  2.    $id = $_GET['id'];  
  3. ?>  
  4. <form enctype="multipart/form-data" id="upload_form" action="target.php" method="POST">  
  5. <input type="hidden" name="UPLOAD_IDENTIFIER" value="<?php echo $id;?>" />   
  6. <input type="file" id="test_file" name="test_file"/><br/>  
  7. <input οnclick="window.parent.startProgress(); return true;" type="submit" value="上传"/>  
  8. </form>  

target.php

PHP Code 复制内容到剪贴板
  1. <?php    
  2. set_time_limit(600);  
  3. if($_SERVER['REQUEST_METHOD']=='POST') {  
  4.   move_uploaded_file($_FILES["test_file"]["tmp_name"],   
  5.   dirname($_SERVER['SCRIPT_FILENAME'])."/UploadTemp/" . $_FILES["test_file"]["name"]);//UploadTemp文件夹位于此脚本相同目录下  
  6.   echo "<p>上传成功</p>";  
  7. }  
  8. ?>  

getprogress.php

PHP Code 复制内容到剪贴板
  1. <?php    
  2. if (function_exists("uploadprogress_get_info")) {  
  3.       
  4.     $info = uploadprogress_get_info($_GET['progress_key']);  
  5.     if(!emptyempty($info)){  
  6.         if(($info['bytes_uploaded'] < $info['bytes_total']) && !emptyempty($info['bytes_uploaded']) && !emptyempty($info['bytes_total'])){  
  7.             $proNum = floor(($info['bytes_uploaded']/$info['bytes_total'])*100);          
  8.         }else{  
  9.             $proNum = 100;  
  10.         }  
  11.         echo $proNum;  
  12.     }else{  
  13.           
  14.     }  
  15. }  
  16. ?>  

progresstest.php

PHP Code 复制内容到剪贴板
  1. <?php  
  2.  $id = md5(microtime() . rand());  
  3. ?>  
  4. <html>  
  5. <head><title>上传进度</title></head>  
  6. <body>  
  7. <script src="js/jquery-1.4.4.min.js" language="javascript"></script>  
  8.   
  9.   
  10. <script language="javascript">  
  11. var proNum=0;  
  12. var loop=0;  
  13. var progressResult = "";  
  14. var interval;  
  15. function sendURL() {  
  16.             $.ajax({  
  17.                         type : 'GET',  
  18.                         url : "getprogress.php",  
  19.                         async : true,  
  20.                         cache : false,  
  21.                         dataType : 'json',  
  22.                         data: "progress_key=<?php echo $id;?>",  
  23.                         success : function(e) {  
  24.                             proNum=parseInt(e);  
  25.                                 if(e){  
  26.                                         document.getElementById("progressinner").style.width = proNum+"%";  
  27.                                        document.getElementById("showNum").innerHTML = proNum+"%";  
  28.                                      setTimeout("getProgress()", 200);  
  29.   
  30.                                 }else{  
  31.                                     if(interval == 1){  
  32.                                         document.getElementById("progressinner").style.width = "100%";  
  33.                                        document.getElementById("showNum").innerHTML = "100%";  
  34.                                     }  
  35.                                 }  
  36.                                    
  37.                         }  
  38.             });  
  39.     
  40. }  
  41.   
  42. function getProgress(){  
  43.  loop++;  
  44.   
  45.  sendURL();  
  46. }  
  47.   
  48. function startProgress(){  
  49.     interval = 1;  
  50.     document.getElementById("progressouter").style.display="block";  
  51.     document.getElementById("progressinner").style.width = proNum+"%";  
  52.     document.getElementById("showNum").innerHTML = proNum+"%";  
  53.    setTimeout("getProgress()", 500);  
  54. }  
  55. </script>  
  56. <iframe id="theframe" name="theframe" src="upload.php?id=<?php echo $id; ?>"   
  57.         style="border: none; height: 100px; width: 400px;" >   
  58. </iframe>  
  59. <br/><br/>  
  60. <div id="progressouter" style="width: 500px; height: 20px; border: 6px solid red; display:none;">  
  61.    <div id="progressinner" style="position: relative; height: 20px; background-color: purple; width: 0%; "></div>  
  62. </div>  
  63. <div id='showNum'></div><br>  
  64. <div id='showNum2'></div>  
  65. </body>  
  66. </html>  

同时可以下载demo  uploadprogress.rar


load_life
关注
专栏目录
jqurey UploadProgress 进度条
10-16
jqurey UploadProgress进度条，简单、易用，不错的工具。
uploadProgress上传显示进度条
08-27
总的来说，“uploadProgress上传显示进度条”是利用HTML5的File API和XMLHttpRequest2实现的一种增强用户体验的技术。通过合理的前端设计和后端配合，可以为用户创建一个流畅、反馈及时的文件上传体验。在实际项目中...
文件上传进度upload_progress
u014391889的博客
07-25 3696
前端: &lt;form id="upload-form" action="upload.php" method="POST" enctype="multipart/form-data"&gt;         &lt;input type="hidden" name="&lt;?php echo ini_get("session.upload_progr
Ajax实现一个简单的文件上传进度条
最新发布
程序人生
09-04 940
Ajax实现一个简单的文件上传进度条功能。
带后台管理的超酷jquery+ajax幻灯相册php源码,jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】...
weixin_36485321的博客
03-09 191
本文实例讲述了jquery+ajax实现上传图片并显示上传进度功能。共享给大家供大家参考，详细如下：jquery上传文件用的formdata，上传进度条需要添加xhr的onprogresshtml代码如下：Ding Jianlong Html总大小；已上传；选择文件：var uploading = false;function upload(){//首先封装一个方法 传入一个监听函数 返回一个绑定...
推荐一个强大的前端文件上传进度条插件：jQuery.uploadProgress
gitblog_00017的博客
05-27 535
推荐一个强大的前端文件上传进度条插件：jQuery.uploadProgress 去发现同类优质开源项目:https://gitcode.com/ 在Web开发中，提供良好的用户体验是至关重要的。尤其是在文件上传功能上，用户往往希望看到实时的上传进度，以了解操作状态。为此，我们今天要推荐一款开源的jQuery插件——jQuery.uploadProgress，它能帮你轻松实现这一功能。 项目介绍 ...
jquery上传文件进度条
阳光
05-06 3192
首先引入需要的js css 用bootstrap进度条 <link rel="stylesheet" href="js/bootstrap/bootstrap.min.css" > <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="...
php实现简单的上传进度条
10-23
总的来说，实现PHP的文件上传进度条需要结合HTML、JavaScript（通常是jQuery）和PHP三者，利用`uploadprogress`扩展来获取上传进度信息，并通过AJAX无刷新地更新前端界面。这个方案既保留了传统表单提交的简单性，又...
java struts2实现文件上传进度条显示
04-21
在Java Struts2框架中实现文件上传进度条显示，主要涉及到的技术点包括Struts2的文件上传、Ajax异步通信以及前端进度条组件的使用。下面将详细讲解这些知识点。 首先，Struts2的文件上传功能是通过Struts2提供的`...
JQuery和PHP结合实现动态进度条上传显示
10-21
本文将详细介绍如何利用JQuery和PHP结合实现动态进度条上传显示的功能。 首先，我们需要解决服务器端的配置问题。在Windows环境下，使用PHP5进行文件上传时，需要修改`php.ini`文件以允许更大的文件上传。主要涉及...
Element｜Upload结合Progress实现上传展示进度条
Mr.小灰狼_随笔
01-11 9373
Element｜Upload结合Progress实现上传展示进度条 背景 ： 项目里的 附件上传 题型组件，用户在上传过程中，如果文件较大，上传过程较慢，而又没有一个类似 Loading... 的加载过程的话，会显得干愣愣的，用户体验较差，所以需要添加一个进度条来提示用户上传的进度，下面有两种方式，一种假的，一种真的，伙伴们可根据需求自行选取实现。
jquery-upload-progress, 上传进度栏使用 apache Nginx 和lighttpd上传进度模块.zip
09-19
jquery-upload-progress, 上传进度栏使用 apache Nginx 和lighttpd上传进度模块 它可以与apache上传进度模块，Nginx 上传进度模块或者lighttpd一起使用，在这里阅读更多： http://drogomir.com/blog/2008/6/18/upload-progress-bar-with-mod_pa
vue-upload：vue + koa多文件进度显示上传
02-22
vue-upload：vue + koa多文件进度显示上传
文件上传onUploadProgress使用
热门推荐
梧桐芊羽的博客
09-29 1万+
api /** * 添加音乐 */ export function AddMusics(filelist, conf) { return http.post('/musicManage/addMusic', filelist,conf) } UploadMusic.vue <template> <div class="fileupload"> <div class="fileupload-title"> <el-button
php7 uploadprogress,上传进度支持(Upload progress in sessions)
weixin_39628160的博客
03-12 156
文件上传进度反馈, 这个需求在当前是越来越普遍, 比如大附件邮件. 在PHP5.4以前, 我们可以通过APC提供的功能来实现. 或者使用PECL扩展uploadprogress来实现.虽然说, 它们能很好的解决现在的问题, 但是也有很明显的不足:1. 他们都需要额外安装(我们并没有打算把APC加入PHP5.4)2. 它们都使用本地机制来存储这些信息, APC使用共享内存, 而upload...
ajax upload progress,jQuery Upload Progress and AJAX file upload
weixin_31880681的博客
08-05 148
Uploading files is actually possible with AJAX these days. Yes, AJAX, not some crappy AJAX wannabes like swf or java.(It also includes the drag/drop interface but that's easily ignored.)Basically what...
上传文件进度条 进度事件progress
清晨一场梦
07-19 6536
在XMLHttpRequest 的open之前重写XMLHttpRequestUpload对象的进度事件progress方法，监听progress方法，计算进度，从而设置进度条。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compa...
使用axios的onUploadProgress制作上传进度条--以及onUploadProgress的源码解读
Vgbire的博客
10-27 1万+
今天早上刚接到上传视频要显示上传进度的需求。作为小白的我，脑子一热，这怎么写，我上传就上传了，我怎么拿到当前这个视频上传了多少数据，难道我还要和后端配合，在上传完成前在极短的时间间隔内例如5ms，不断告诉我当前上传了多少数据？ 后面网上找了一下，我还是太年轻了，axios竟然有现成的API onUploadProgress去帮你完成这么复杂的事情。 onUploadProgress 从名字就可以看出来，这是允许为上传处理进度的事件。他是axios的请求配置之一。 const config = { .
浏览器接口 fetch 发起的请求如何跟踪上传进度?
湖北太米网络科技有限公司
12-09 2109
在`reader.read().then()`的回调函数中，我们按块读取文件的内容，累计已上传的大小`uploadedSize`并计算上传进度。在使用浏览器接口`fetch`发起请求时，你可以利用`ReadableStream`对象的`onprogress`事件来跟踪上传进度。`fetch`函数返回的是一个`Promise`对象，可以通过调用`response.body.getReader()`获取到`ReadableStream`，然后通过监听`onprogress`事件来获取上传进度信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值