Detailed interpretation of php upload progress bar (recommended)-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

Detailed interpretation of php upload progress bar (recommended)

墨辰丷

Jun 05, 2018 pm 05:56 PM

This article mainly introduces the detailed interpretation of the PHP upload progress bar (recommended). Interested friends can refer to it. I hope it will be helpful to everyone.

Three solutions for uploading files on the Web Share with everyone:

What I want to use here is the form method . By setting the enctype="multipart/form-data" attribute for the form element, the data submitted by the form is submitted in binary encoding, and the content of the uploaded file can be obtained by using the binary stream to obtain the content in the Servlet that receives this request. This enables file upload.

The enctype attribute of the form element specifies the encoding method of the form data. This attribute has 3 values:

I found two methods on the Internet, PHP cooperates with apc to implement it and uses uploadprogress to implement it. This time I want to use uploadprogress. Click the address to download the corresponding version of dll in php. Install the php_uploadprogress.dll extension and restart apache.

Principle of progress bar implementation:

An iframe method of uploading files without refreshing is used here.

The picture after the upload is completed:

<body>
  <p style="padding:20px">
   <form action="action.php" enctype="multipart/form-data" method="post" target="iframeUpload">
    <iframe name="iframeUpload" width="400" height="400" frameborder=&#39;1&#39;></iframe>
    <input type="hidden" name="UPLOAD_IDENTIFIER" value="1" />
    <input id="file1" name="file1" type="file"/> 
    <input value="上传" type="submit" onclick="startProgress()"/> 
   </form>
  </p>
  <p style="width: 500px; height: 20px;border:1px solid red"> 
   <p style="position: relative; height: 20px; background-color: purple; width: 0%;" class="barinner"></p>
  </p>
  <p id=&#39;showNum&#39;></p>
  <p class="prbar">
   <p class="prpos barinner"></p>
  </p>
 </body>

Copy after login

In the above HTML code, please pay attention to UPLOAD_IDENTIFIER. This is used to locate and view which file is uploaded. Progressive. I will write it as a 1 here, but you can write it as a random number generated by PHP. The following is the JS script:

var proNum=0; 
 var loop=0; 
 var progressResult = ""; 
 var interval; 
 function sendURL() { 
  $.ajax({ 
   type : &#39;GET&#39;, 
   url : "getprogress.php", 
   async : true, 
   cache : false, 
   dataType : &#39;json&#39;,
   data: "progress_key=" + $(&#39;input[name=UPLOAD_IDENTIFIER]&#39;).val(),
   success : function(e) { 
    proNum=parseInt(e); 
    if(e){ 
     $(&#39;.barinner&#39;).css(&#39;width&#39;, proNum+"%");
     $(&#39;#showNum&#39;).html(proNum+"%");
     setTimeout("getProgress()", 200); 
   
    }else{ 
     if(interval == 1){ 
      $(&#39;.barinner&#39;).css(&#39;width&#39;, "100%");
      $(&#39;#showNum&#39;).html("100%");
     } 
    }
   } 
  }); 
 } 
 function getProgress(){ 
  loop++; 
  sendURL(); 
 } 
 function startProgress(){ 
  interval = 1;
  $(&#39;.barinner&#39;).css(&#39;width&#39;, proNum+"%"); 
  $(&#39;#showNum&#39;).html(proNum+"%");
 setTimeout("getProgress()", 500); 
 }

Copy after login

The following is the content of the getprogress.php file:

<?php 
if (function_exists("uploadprogress_get_info")) {
 $info = uploadprogress_get_info($_GET[&#39;progress_key&#39;]);
 if(!empty($info)){
  if(($info[&#39;bytes_uploaded&#39;] < $info[&#39;bytes_total&#39;]) && !empty($info[&#39;bytes_uploaded&#39;]) && !empty($info[&#39;bytes_total&#39;])){
   $proNum = floor(($info[&#39;bytes_uploaded&#39;]/$info[&#39;bytes_total&#39;])*100);  
  }else{
   $proNum = 100;
  }
  echo $proNum;
 }else{
  echo 0;
 }
}

Copy after login

After the upload is completed, I show the CSS of two progress bars. The second one is using the latest Written in CSS3. Some CSS3 animation properties are used.

.prbar {
 margin:5px;
 width:500px;
 background-color:#dddddd;
 overflow:hidden;
  
 /* 边框效果 */
 border: 1px solid #bbbbbb;
 -moz-border-radius: 15px;
 border-radius: 15px;
    
 /* 为进度条增加阴影效果 */
 -webkit-box-shadow: 0px 2px 4px #555555;
 -moz-box-shadow: 0px 2px 4px #555555;
 box-shadow: 0px 2px 4px #555555;   
}
/* No rounded corners for Opera, because the overflow:hidden dont work with rounded corners */
doesnotexist:-o-prefocus, .prbar {
border-radius:0px;
}
.prpos {
 width:0%;
 height:30px;
 background-color:#3399ff;
 border-right:1px solid #bbbbbb;
 /* CSS3 进度条渐变 */
 transition: width 2s ease;
 -webkit-transition: width 0s ease;
 -o-transition: width 0s ease;
 -moz-transition: width 0s ease;
 -ms-transition: width 0s ease;
 /* CSS3 Stripes */
 background-image: linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
 background-image: -moz-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
 background-image: -ms-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
 background-image: -o-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
 background-image: -webkit-gradient(linear, 100% 100%, 0 0,color-stop(.25, #99ccff), color-stop(.25, #3399ff),color-stop(.5, #3399ff),color-stop(.5, #99ccff),color-stop(.75, #99ccff),color-stop(.75, #3399ff),color-stop(1, #3399ff));
 background-image: -webkit-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
 background-size: 40px 40px;
 /* Background stripes animation */
 animation: bganim 3s linear 2s infinite;
 -moz-animation: bganim 3s linear 2s infinite;
 -webkit-animation: bganim 3s linear 2s infinite;
 -o-animation: bganim 3s linear 2s infinite;
 -ms-animation: bganim 3s linear 2s infinite;
}
@keyframes bganim {
 from {background-position:0px;} to { background-position:40px;}
}
@-moz-keyframes bganim {
 from {background-position:0px;} to { background-position:40px;}
}
@-webkit-keyframes bganim {
 from {background-position:0px;} to { background-position:40px;}
}
@-o-keyframes bganim {
 from {background-position:0px;} to { background-position:40px;}
}
@-ms-keyframes bganim {
 from {background-position:0px;} to { background-position:40px;}
}

Copy after login

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related recommendations:

php Detailed explanation of infinite classification tree data formatting code example

#SSO single sign-on system interface implemented by php Function example analysis

Detailed explanation of the thread pool multi-threaded crawler function example implemented by php and python

The above is the detailed content of Detailed interpretation of php upload progress bar (recommended). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

4 weeks ago By DDD

Atomfall guide: item locations, quest guides, and tips

4 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7659

CakePHP Tutorial

1393

C# Tutorial

1205

What is the format of the account name of steam

win11 activation key permanent

Related knowledge

Alipay PHP SDK transfer error: How to solve the problem of 'Cannot declare class SignData'? Apr 01, 2025 am 07:21 AM

Alipay PHP...

Explain JSON Web Tokens (JWT) and their use case in PHP APIs. Apr 05, 2025 am 12:04 AM

JWT is an open standard based on JSON, used to securely transmit information between parties, mainly for identity authentication and information exchange. 1. JWT consists of three parts: Header, Payload and Signature. 2. The working principle of JWT includes three steps: generating JWT, verifying JWT and parsing Payload. 3. When using JWT for authentication in PHP, JWT can be generated and verified, and user role and permission information can be included in advanced usage. 4. Common errors include signature verification failure, token expiration, and payload oversized. Debugging skills include using debugging tools and logging. 5. Performance optimization and best practices include using appropriate signature algorithms, setting validity periods reasonably,

How does session hijacking work and how can you mitigate it in PHP? Apr 06, 2025 am 12:02 AM

Session hijacking can be achieved through the following steps: 1. Obtain the session ID, 2. Use the session ID, 3. Keep the session active. The methods to prevent session hijacking in PHP include: 1. Use the session_regenerate_id() function to regenerate the session ID, 2. Store session data through the database, 3. Ensure that all session data is transmitted through HTTPS.

Describe the SOLID principles and how they apply to PHP development. Apr 03, 2025 am 12:04 AM

The application of SOLID principle in PHP development includes: 1. Single responsibility principle (SRP): Each class is responsible for only one function. 2. Open and close principle (OCP): Changes are achieved through extension rather than modification. 3. Lisch's Substitution Principle (LSP): Subclasses can replace base classes without affecting program accuracy. 4. Interface isolation principle (ISP): Use fine-grained interfaces to avoid dependencies and unused methods. 5. Dependency inversion principle (DIP): High and low-level modules rely on abstraction and are implemented through dependency injection.

How to automatically set permissions of unixsocket after system restart? Mar 31, 2025 pm 11:54 PM

How to automatically set the permissions of unixsocket after the system restarts. Every time the system restarts, we need to execute the following command to modify the permissions of unixsocket: sudo...

How to debug CLI mode in PHPStorm? Apr 01, 2025 pm 02:57 PM

How to debug CLI mode in PHPStorm? When developing with PHPStorm, sometimes we need to debug PHP in command line interface (CLI) mode...

Explain late static binding in PHP (static::). Apr 03, 2025 am 12:04 AM

Static binding (static::) implements late static binding (LSB) in PHP, allowing calling classes to be referenced in static contexts rather than defining classes. 1) The parsing process is performed at runtime, 2) Look up the call class in the inheritance relationship, 3) It may bring performance overhead.

How to send a POST request containing JSON data using PHP's cURL library? Apr 01, 2025 pm 03:12 PM

Sending JSON data using PHP's cURL library In PHP development, it is often necessary to interact with external APIs. One of the common ways is to use cURL library to send POST�...

See all articles