显示在使用PHP和jQuery下载文件下载进度 [英] showing download progress while downloading a file using PHP and jquery

问题描述

我使用PHP和jQuery开发一个下载管理器。

I am developing a download manager using php and jquery.

要求一个脚本，将下载的文件，并显示下载进度。

Requested a script that will download a file and also show download progress.

我尝试以下，但它不工作

I tried following, but it not works

jQuery的

function downloadFile(){
var fileNameDownloading ="somefile.mp3"
var oReq = new XMLHttpRequest();    
oReq.addEventListener("progress", updateProgress, false);
var params = "filename="+fileNameDownloading;   
oReq.open("GET", "scripts/download.php?"+params, true);
oReq.responseType = "blob";//blob arraybuffer

function updateProgress (e) {
    console.log(e.loaded/e.total);
}
oReq.send();    

}

PHP

<?php
$file = $_GET['filename'];
$fileSize = get_size($file);
$packetSize = 262144;//2000
if($packetSize > $fileSize){
    $packetSize = $fileSize;
}
download($file,$packetSize);


function download($file,$chunks){
    set_time_limit(0);
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-disposition: attachment; filename='.basename($file));
    header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
    header('Expires: 0');
    header('Pragma: public');
    $size = get_size($file);
    header('Content-Length: '.$size);

    $i = 0;
    while($i<=$size){
        //Output the chunk
        get_chunk($file,(($i==0)?$i:$i+1),((($i+$chunks)>$size)?$size:$i+$chunks));
        $i = ($i+$chunks);
    }

}

//Callback function for CURLOPT_WRITEFUNCTION, This is what prints the chunk
function chunk($ch, $str) {

    print($str);
    return strlen($str);
}

//Function to get a range of bytes from the remote file
function get_chunk($file,$start,$end){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $file);
    curl_setopt($ch, CURLOPT_RANGE, $start.'-'.$end);
    curl_setopt($ch, CURLOPT_BINARYTRANSFER, 1);
    curl_setopt($ch, CURLOPT_WRITEFUNCTION, 'chunk');
    $result = curl_exec($ch);
    curl_close($ch);
}

//Get total size of file
function get_size($url){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HEADER, true);
    curl_setopt($ch, CURLOPT_NOBODY, true);
    curl_exec($ch);
    $size = curl_getinfo($ch, CURLINFO_CONTENT_LENGTH_DOWNLOAD);
    return intval($size);
}

？>

寻找一个建议，我们如何可以下载文件，同时使用PHP和JavaScript显示下载进度。谢谢

Looking for a suggestion, how we can download a file and also show download progress using PHP and javascript. Thanks

推荐答案

两种可能的方法包括使用或者轮询或上传进度ajaxSubmit的选项。

Two possible methods include using either polling or the uploadProgress ajaxSubmit option.

使用AJAX / JavaScript的投票，你将有一个调用服务器上的文件，并认为有多少数据被写入到服务器的setTimeout的每一秒。 本文应该帮助提供一个很好的例子和投票的描述。回调将基于文件大小设置进度

Using ajax / javascript polling, you would have a setTimeout every second that calls a server file and sees how much data has been written to the server. This article should help provide a good example and description of polling. The callback would set the progress based on the file size.

第二种方法是使用上传进度ajaxSubmit会选项。 本文会提供一个良好的教程如何设置起来。

The second method is using the uploadProgress ajaxSubmit option. This article will give a good tutorial for how to set this up.

以下是code例如：

jQuery的：

$(document).ready(function() {  
var options = { 
        target:   '#output', 
        beforeSubmit:  beforeSubmit,
        uploadProgress: OnProgress, //upload progress callback 
        success:       afterSuccess,
        resetForm: true  
    }; 

 $('#MyUploadForm').submit(function() { 
        $(this).ajaxSubmit(options);            
        return false; 
    });
});

function OnProgress(event, position, total, percentComplete)
{
    //Progress bar
    progressbar.width(percentComplete + '%') //update progressbar percent complete
    statustxt.html(percentComplete + '%'); //update status text
    if(percentComplete>50)
        {
            statustxt.css('color','#fff'); //change status text to white after 50%
        }
}

HTML

<div id="upload-wrapper">
<div align="center">
<h3>Ajax Image Uploader with Progressbar</h3>
<span class="">Image Type allowed: Jpeg, Jpg, Png and Gif. | Maximum Size 1 MB</span>
<form action="processupload.php" onSubmit="return false" method="post" enctype="multipart/form-data" id="MyUploadForm">
<input name="ImageFile" id="imageInput" type="file" />
<input type="submit"  id="submit-btn" value="Upload" />
<img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
</form>
<div id="progressbox" style="display:none;"><div id="progressbar"></div ><div id="statustxt">0%</div></div>
<div id="output"></div>
</div>
</div>

CSS

#progressbox {
border: 1px solid #0099CC;
padding: 1px; 
position:relative;
width:400px;
border-radius: 3px;
margin: 10px;
display:none;
text-align:left;
}
#progressbar {
height:20px;
border-radius: 3px;
background-color: #003333;
width:1%;
}
#statustxt {
top:3px;
left:50%;
position:absolute;
display:inline-block;
color: #000000;
}

这篇关于显示在使用PHP和jQuery下载文件下载进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！