PHP如何实现带有进度条的长尾词式Ajax文件上传功能？

2026-04-02 05:341阅读0评论SEO基础

内容介绍
文章标签
相关推荐

本文共计924个文字，预计阅读时间需要4分钟。

本例展示了PHP实现带有进度条的Ajax文件上传功能。分享给广大开发者参考，具体如下：

之前分享了一篇关于PHP使用FileApi实现Ajax上传文件的文章，其中的Ajax上传是不带进度条的。下面介绍如何实现带有进度条的Ajax文件上传功能。

1. 修改PHP后端代码，增加进度条逻辑：

php// 假设上传文件名为$filename$chunk_size=2 * 1024 * 1024; // 每次上传的文件块大小为2MB$offset=0; // 文件块的偏移量

if (isset($_FILES['file'])) { $file=$_FILES['file']; $file_path='upload/' . $file['name']; // 上传文件的保存路径

// 打开文件 $fp=fopen($file_path, 'ab'); if (!$fp) { echo json_encode(['status'=> 'error', 'message'=> '无法打开文件']); exit; }

// 获取文件总大小 $file_size=filesize($file['tmp_name']); $total_size=filesize($file_path);

// 读取文件块并写入 while ($offset < $file_size) { $chunk=fread($file['tmp_name'], $chunk_size); fwrite($fp, $chunk); $offset +=$chunk_size;

// 计算进度 $progress=($total_size + $offset) / $file_size * 100;

// 返回进度信息 echo json_encode(['status'=> 'progress', 'progress'=> $progress]); flush(); // 清空输出缓冲区 }

// 关闭文件 fclose($fp);

echo json_encode(['status'=> 'success', 'message'=> '文件上传成功']);}

2. 修改前端Ajax代码，增加进度条显示：

javascript// 初始化进度条var progress=document.getElementById('progress');progress.value=0;

// 上传文件var formData=new FormData();formData.append('file', fileInput.files[0]);

var xhr=new XMLHttpRequest();xhr.open('POST', 'upload.php', true);

xhr.upload.onprogress=function(e) { if (e.lengthComputable) { var progress=(e.loaded / e.total) * 100; progress.value=progress; }};

xhr.onload=function() { if (xhr.status===200) { var response=JSON.parse(xhr.responseText); if (response.status==='success') { alert('文件上传成功'); } else if (response.status==='error') { alert(response.message); } }};

xhr.send(formData);

以上代码实现了带有进度条的Ajax文件上传功能。在实际应用中，您可以根据需求调整文件块大小、上传路径等参数。

本文实例讲述了PHP实现带进度条的Ajax文件上传功能。分享给大家供大家参考，具体如下：

之前分享了一篇关于 php使用FileApi实现Ajax上传文件的文章，里面的Ajax文件上传是不带进度条的，今天分享一篇关于带进度条的Ajax文件上传文章。

效果图：

项目结构图：

12-progress-upload.html文件：

页面中主要有一个上传文件控件，有文件被选择时响应selfile()方法，接着利用js读取上传文件、创建FormData对象和xhr对象，利用xhr2的新标准，写一个监听上传过程函数，请求11-fileApi.php文件。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>HTML5带进度条的上传功能</title> <link rel="stylesheet" href=""> <script> function selfile(){ //js读取上传文件 var file = document.getElementsByTagName('input')[0].files[0]; //创建FormData对象 var fd = new FormData(); fd.append('pic',file); //ajax上传文件 var xhr = new XMLHttpRequest(); xhr.open('POST','11-fileApi.php',true); //利用xhr2的新标准，为上传过程，写一个监听函数 xhr.upload.onprogress = function(ev){ if(ev.lengthComputable){//文件长度可计算 var percent = 100*ev.loaded/ev.total;//计算上传的百分比 document.getElementById('bar').style.width = percent + '%';//更改上传进度 document.getElementById('bar').innerHTML = parseInt(percent)+'%';//显示上传进度 } } xhr.send(fd);//发送请求 } </script> <style> #progress{ width:500px; height:30px; border:1px solid green; } #bar{ width:0%; height:100%; background-color: green; } </style> </head> <body> <h1>HTML5带进度条的上传功能</h1> <div id="progress"> <div id="bar"></div> </div> <input type="file" name="pic" onchange="selfile();" /> </body> </html>

11-fileApi.php文件：

首先判断是否有文件上传，然后判断文件上传是否成功，最后移动文件至当前目录下的upload目录下，文件名不变。

<?php /** * fileApi实现Ajax上传文件 * @author webbc */ if(empty($_FILES)){ exit('no file'); } if($_FILES['pic']['error'] !== 0){ exit('fail'); } move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/'.$_FILES['pic']['name']); ?>

更多关于PHP相关内容感兴趣的读者可查看本站专题：《php文件操作总结》、《PHP目录操作技巧汇总》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》及《PHP网络编程技巧总结》

希望本文所述对大家PHP程序设计有所帮助。

标签：Ajax 文件上传功能