PHP+JS实现文件分块上传的示例代码

发布时间：2023-02-16 12:51:55 所属栏目：PHP 来源：互联网

导读：我们在上传大文件时，可能会由于服务器的原因导致文件上传失败，文件过大时由于服务器的配置或响应事件过长导致上传文件失败，这时候我们可以将一个大的文件分为若干块，然后分批次上传到服务端，当所有文件块上传完成后再由服务器将各个文件块整合成我们上

　　我们在上传大文件时，可能会由于服务器的原因导致文件上传失败，文件过大时由于服务器的配置或响应事件过长导致上传文件失败，这时候我们可以将一个大的文件分为若干块，然后分批次上传到服务端，当所有文件块上传完成后再由服务器将各个文件块整合成我们上传的文件

　　一、分块上传流程
　　1：由前端js将上传的文件信息进行切割成若干块，然后循环将若干块的文件块上传到服务端

　　2：服务端接收到文件块信息后保存起来，当所有文件块上传完毕后，将所有上传的文件块整合成文件并保存起来

　　二、实现代码
　　HTML
　　<input type="file" id="file">
　　<input type="button" id="upload" value="上传">
　　<input type="button" id="stop" value="停止">
　　<input type="button" id="restart" value="继续上传">
　　上传进度：<span id="progress"></span>

　　//获取节点
　　var fileForm = document.getElementById("file");
　　var uploadBtn = document.getElementById('upload');
　　var stopBtn = document.getElementById('stop');
　　var restartBtn = document.getElementById('restart');
　　//定义常量
　　const LENGTH = 100 * 1024;//每个上传的文件块大小(100KB)
　　var start = 0;
　　var end = LENGTH + start;
　　var blob;
　　var is_stop = 0;
　　var blob_num = 1;
　　var file = null;
　　var upload_instance = new Upload();
　　//上传事件
　　uploadBtn.onclick = function () {
　　   upload_instance.addFileAndSend(fileForm);
　　   return false;
　　}
　　stopBtn.onclick = function () {
　　   upload_instance.stop();
　　   return false;
　　}
　　restartBtn.onclick = function () {
　　   upload_instance.start();
　　   return false;
　　}
　　function Upload() {
　　    //判断浏览器类型
　　    if (window.XMLHttpRequest){
　　        //IE7+, Firefox, Chrome, Opera, Safari
　　        var xhr=new XMLHttpRequest();
　　    }else{
　　        //IE6, IE5
　　        var xhr=new ActiveXObject("Microsoft.XMLHTTP");
　　    }
　　   //上传文件
　　   this.addFileAndSend = function (that) {
　　       file = that.files[0];
　　       blob = cutFile(file);
　　       //上传
　　       uploadFile(blob, file);
　　       blob_num += 1;
　　   }
　　   //停止文件上传
　　   this.stop = function () {
　　       xhr.abort();
　　       is_stop = 1;
　　   }
　　   this.start = function () {
　　       uploadFile(blob, file);
　　       is_stop = 0;
　　   }
　　   //切割文件
　　   function cutFile(file) {
　　       var file_blob = file.slice(start, end);
　　       start = end;
　　       end = start + LENGTH;
　　       return file_blob;
　　   };
　　    //上传文件
　　    function uploadFile(blob, file) {
　　        var form_data = new FormData();
　　        var total_blob_num = Math.ceil(file.size / LENGTH);
　　        //上传文件信息
　　        form_data.append('file', blob);
　　        //上传的第几个文件块
　　        form_data.append('blob_num', blob_num);
　　        //总文件块数
　　        form_data.append('total_blob_num', total_blob_num);
　　        //文件名称
　　        form_data.append('file_name', file.name);
　　
　　
　　        //上传
　　        xhr.open('POST', './test.php', false);
　　        xhr.onreadystatechange = function () {
　　            //获取上传进度
　　            if (total_blob_num == 1) {
　　                progressText = '100%';
　　            } else {
　　                progressText = (Math.min(100, (blob_num / total_blob_num) * 100)).toFixed(2) + '%';
　　            }
　　            var progress = document.getElementById('progress');
　　            progress.innerHTML = progressText;
　　
　　            //循环执行上传，直到所有文件块上传完成
　　            var t = setTimeout(function () {
　　                if (start < file.size && is_stop == 0) {
　　                    blob = cutFile(file);
　　                    uploadFile(blob, file);
　　                    blob_num += 1;
　　                } else {
　　                    //所有文件块上传完成
　　                }
　　            }, 1000);
　　        }
　　        xhr.send(form_data);
　　        //每次文件块上传后，清空上传信息
　　        form_data = "";
　　    }
　　}

　　PHP
　　上传类

　　class Upload
　　{
　　    /**
　　     * @var string 上传目录
　　     */
　　    private $filepath = './upload'; //上传目录

（编辑：莱芜站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/2

尾页