показ загрузки при загрузке файла с использованием PHP и jquery

Я разрабатываю менеджер загрузки, используя php и jquery.

Запрошен сценарий, который загрузит файл, а также покажет ход загрузки.

Я пробовал следовать, но он не работает

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 $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. благодаря

Solutions Collecting From Web of "показ загрузки при загрузке файла с использованием PHP и jquery"

Два возможных метода включают использование опроса или параметр uploadProgress ajaxSubmit.

Используя опрос ajax / javascript, каждый раз вы будете иметь значение setTimeout, которое вызывает файл сервера и видит, сколько данных было записано на сервер. Эта статья должна помочь обеспечить хороший пример и описание опроса. Обратный вызов установил бы прогресс, основанный на размере файла.

Второй метод использует параметр uploadProgress ajaxSubmit. В этой статье вы найдете хороший учебник по настройке.

Ниже приведен пример кода:

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; }

Взгляните на этот ответ на stackoverflow . Это действительно работает, и ссылка не скоро умрет.

Вот код javascript:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="a1" data-filename="filename.xml">Click to download</div> <script> $('#a1').click(function() { var that = this; var page_url = 'download.php'; var req = new XMLHttpRequest(); req.open("POST", page_url, true); req.addEventListener("progress", function (evt) { if(evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; console.log(percentComplete); } }, false); req.responseType = "blob"; req.onreadystatechange = function () { if (req.readyState === 4 && req.status === 200) { var filename = $(that).data('filename'); if (typeof window.chrome !== 'undefined') { // Chrome version var link = document.createElement('a'); link.href = window.URL.createObjectURL(req.response); link.download = filename; link.click(); } else if (typeof window.navigator.msSaveBlob !== 'undefined') { // IE version var blob = new Blob([req.response], { type: 'application/force-download' }); window.navigator.msSaveBlob(blob, filename); } else { // Firefox version var file = new File([req.response], filename, { type: 'application/force-download' }); window.open(URL.createObjectURL(file)); } } }; req.send(); }); </script>