PHP 文件上传切片处理 使用XMLHttpRequest实现 可重复上传文件

最新推荐文章于 2024-07-17 19:03:46 发布
最新推荐文章于 2024-07-17 19:03:46 发布
阅读量337 收藏
点赞数
分类专栏： 前端 # PHP 文章标签： php html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kai_Wai/article/details/121395607
版权

文章目录

前言

在实际开发中不可避免的会使用文件上传，有时候用户上传的文件比较大，就会导致上传失败，为了解决这个问题，可以把用户上传的文件进行切片，前端切片，后端合并的方法

一、前端代码

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大文件切片上传</title>
    <style>
        #progress{
            width: 300px;
            height: 20px;
            background-color:#f7f7f7;
            box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
            border-radius:4px;
            background-image:linear-gradient(to bottom,#f5f5f5,#f9f9f9);
        }

        #finish{
            background-color: #149bdf;
            background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
            background-size:40px 40px;
            display: inline-block;
            height: 20px;
        }

        form{
            margin-top: 50px;
        }
    </style>

</head>

<body>

<p id="progress">
    <span id="finish" style="width: 0%;" progress="0"></span>
</p>

<form action="">
    <input type="file" name="file" id="file">
    <input type="button" value="停止" id="stop">
</form>

<script>

    var fileForm = document.getElementById("file");
    var stopBtn = document.getElementById('stop');
    var upload = new Upload();


    fileForm.onchange = function(){
        upload.addFileAndSend(this);
    };


    stopBtn.onclick = function(){
        this.value = "停止中";
        upload.stop();
        this.value = "已停止";
    };

    function Upload(){
        var xhr = new XMLHttpRequest();
        const LENGTH = 1024 * 1024;
        var start = 0;
        var end = start + LENGTH;
        var blob;
        var blob_num = 1;
        var is_stop = 0;
        var is_finish = 0;

        //对外方法，传入文件对象
        this.addFileAndSend = function(that){
            start = 0;
            is_finish = 0;
            var file = that.files[0];
            blob = cutFile(file);
            sendFile(blob,file);
            // blob_num  += 1;
        };

        //停止文件上传
        this.stop = function(){
            xhr.abort();
            is_stop = 1;
        };

        //切割文件
        function cutFile(file){
            var file_blob = file.slice(start,end);
            start = end;
            end = start + LENGTH;
            return file_blob;
        };


        //发送文件
        function sendFile(blob,file){
            var url = "/upload.php";
            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',url,true);

            var progress;
            var progressObj = document.getElementById('finish');
            if(total_blob_num == 1){
                progress = '100%';
            }else{
                progress = Math.min(100,(blob_num/total_blob_num)* 100 ) +'%';
                console.log(progress);
                console.log('分割');
            }
            progressObj.style.width = progress;

            xhr.onreadystatechange  = function () {
                if (xhr.readyState==4 && xhr.status==200) {
                    var json = JSON.parse(xhr.responseText);
                    console.log(json);
                    if(json.code === 2){
                        blob_num = 1;
                        is_finish = 1;
                    }else{
                        blob_num += 1;
                        is_finish = 0;
                        blob = cutFile(file);
                        sendFile(blob,file);
                    }
                }
                // var t = setTimeout(function(){
                //     if(start < file.size && is_stop === 0){
                //         blob = cutFile(file);
                //         sendFile(blob,file);
                //         // blob_num  += 1;
                //     }else{
                //         setTimeout(t);
                //     }
                // },1000);
            };
            xhr.send(form_data);
        }
    }

</script>
</body>
</html>

二、后端代码


<?php

class Upload{

    private $filepath = '../public/upload'; //上传目录

    private $tmpPath;  //PHP文件临时目录

    private $blobNum; //第几个文件块

    private $totalBlobNum; //文件块总数

    private $fileName; //文件名





    public function __construct($tmpPath,$blobNum,$totalBlobNum,$fileName){

        $this->tmpPath =  $tmpPath;

        $this->blobNum =  $blobNum;

        $this->totalBlobNum =  $totalBlobNum;

        $this->fileName =  $fileName;



        $this->moveFile();

        $this->fileMerge();

    }



    //判断是否是最后一块，如果是则进行文件合成并且删除文件块

    private function fileMerge(){

        if($this->blobNum == $this->totalBlobNum){

            $blob = '';

            for($i=1; $i<= $this->totalBlobNum; $i++){

                $blob = file_get_contents($this->filepath.'/'. $this->fileName.'__'.$i);

                file_put_contents($this->filepath.'/'. $this->fileName,$blob,FILE_APPEND);

            }

            $this->deleteFileBlob();

        }

    }



    //删除文件块

    private function deleteFileBlob(){

        for($i=1; $i<= $this->totalBlobNum; $i++){

            @unlink($this->filepath.'/'. $this->fileName.'__'.$i);

        }

    }



    //移动文件

    private function moveFile(){

        $this->touchDir();

        $filename = $this->filepath.'/'. $this->fileName.'__'.$this->blobNum;

        move_uploaded_file($this->tmpPath,$filename);

    }



    //API返回数据

    public function apiReturn(){

        if($this->blobNum == $this->totalBlobNum){

            if(file_exists($this->filepath.'/'. $this->fileName)){

                $data['code'] = 2;

                $data['msg'] = 'success';

                $data['file_path'] = 'http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['SCRIPT_FILENAME']).str_replace('.','',$this->filepath).'/'. $this->fileName;

                $data['blobNum'] = $this->blobNum;

                $data['totalBlobNum'] = $this->totalBlobNum;


            }

        }else{

            if(file_exists($this->filepath.'/'. $this->fileName.'__'.$this->blobNum)){

                $data['code'] = 1;

                $data['msg'] = 'waiting for all';

                $data['file_path'] = '';

                $data['blobNum'] = $this->blobNum;

                $data['totalBlobNum'] = $this->totalBlobNum;

            }

        }

        header('Content-type: application/json');

        echo json_encode($data);

    }



    //建立上传文件夹

    private function touchDir(){

        if(!file_exists($this->filepath)){

            return mkdir($this->filepath);

        }

    }

}


if (!isset($_POST['blob_num'])) {
    exit("error");
}


//实例化并获取系统变量传参
$upload = new Upload($_FILES['file']['tmp_name'],$_POST['blob_num'],$_POST['total_blob_num'],$_POST['file_name']);
//调用方法，返回结果
$upload->apiReturn();
Kai_Wai
关注
专栏目录
XMLHttpRequest上传文件
小小人生的专栏
08-09 4116
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 文件： -->  许可证.jpg 支持jpg、jpeg、png、bmp格式图片，大小不超过2M 确定
PHP简单实现切片上传
LMXQH的博客
01-09 2340
本篇仅作记录，不做教程，若需要详细讲解，请参考其它文章。 实现思路： JS思路 1.监听上传按钮的onchange事件 2.获取文件的FILE对象 3.把文件的FILE对象进行切割，并且附加到FORMDATA对象中 4.把FORMDATA对象通过AJAX发送到服务器 5.重复3、4步骤，直到文件发送完。 PHP思路 1.建立上传文件夹 2.把文件从上传临时目录移动到上传文件夹 3.所有的文件...
PHP+jQuery+html5实现图片选取裁剪上传(兼容手机上传)
04-24
在网上找到了图片上传插件jquery.min.js，但没有上传功能，自己花了10分钟给加上去了哈，有bug留言，一般当天改完上传。 转自：素材火jQuery教程演示：http://www.sucaihuo.com/js/71.html
html，php 上传文件 切割分段上传
z11409y的博客
06-29 160
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-C
PHP大文件分片上传的实现方法
最新发布
alisky119的博客
07-17 792
免费提供7*24小时技术支持，免费提供电话支持，免费提供微信支持，免费提供远程协助支持，免费提供QQ支持，完全开放产品源代码，源代码包含前端，后端，控件源代码，并且支持信创国产化环境，包含国产操作系统，国产数据库。React，前端的话都有可能用到，VUE2，VUE3，HTML5，也不一定是VUE， 公司内部有自己的产品，有些产品是之前开发的，没有用VUE，而是用的普通的HTML模板，用的也还好。支持加密上传，下载加密，端到端加密，国密SM4加密算法，数据加密传输，传输过程中要保证数据是加密的。
php ajax xmlhttpreq 上传文件 get,使用Ajax XmlHttpRequest上传文件
weixin_30668061的博客
04-14 68
使用Ajax XmlHttpRequest上传文件嗨，我正在尝试使用此代码发送带有xmlhttprequest的文件。varurl="http://localhost:80/....";$(document).ready(function(){document.getElementById('upload').addEventListener('change',function(e){va...
前端JS之HTML利用XMLHttpRequest()和FormData()进行大文件分段上传
weixin_30838873的博客
06-12 1134
用于网页向后端上传大文件 ### 前端代码<body> <input type="file" name="video" id="file" /> <input type="button" class="btn btn-info" id="sub" value="提交"> <script> $("#sub")...
PHP大文件分割上传 PHP分片上传
10-19
// 该函数用于处理文件上传，分为文件切片、上传、暂停和取消 function uploadFile(file) { var chunkSize = 1024 * 1024 * 5; // 分片大小5MB var fileName = file.name; var fileSize = file.size; var ...
iOS端实现大文件上传和断点续传
mediadev的博客
07-03 1943
我们当前正处理视频爆炸的时代，各种场景下的视频应用越来越多，而且视频分辨率和视频尺寸越来越大，而且我们又需要和他人之间进行视频分享，这样就常常遇到大文件上传和断点续传的问题。因为文件过大（比如2GB以上），必须要考虑上传过程网络中断的情况,需要做到断点续传，否则我们就需要再次重新上传。所以我们在iOS端上传内容的时候，需要将大文件进行分片，比如分成1024*1024B，即将大文件分成1M的片进行上...
9Django-----------Django框架------------安装使用、基本介绍
weixin_43761516的博客
12-28 1375
一、Django框架介绍 二、Django框架搭建 （一）环境搭建 （二）项目实例 三、项⽬结构介绍 （一）URL与视图 1）视图的定义 2）路由的定义 3）URL模块化 4）URL添加参数 5）url命名 （二）模板 1）if标签 2）for...in...标签 3）a标签 （三）数据库 1）Django配置连接数据库 2）创建ORM模型 3）映射模型到数据库中 4）ORM的增删改查 5）F表达式和Q表达式----优化ORM 6）QuerySet的⽅法 7）ORM模型迁移 （四）⾼级视图 1）请求方式 2
前端试题(四)
热门推荐
Stephy_Yy
04-25 6万+
又是新的一周 1. vue过滤器使用场景 2. v-on绑定多个方法 3. 在菜单结构不确定时，前端如何动态渲染 树形结构：深度遍历、广度遍历（递归） 4. Vue-router的钩子函数 5. Vue-router的实现原理 6. Vuex的实现原理 7. Vue-cli的自定义指令 8. keep-alive的两个属性 9. keep-alive组件 10. Vue的核心 11...
1次ajax请求(XMLHttpRequest)上传多个文件，支持进度条处理
08-27
封装了一个ajax多文件上传，功能就是选择多个文件，ajax上传，支持进度条处理。 调用方式很简单，写一个json对象做为参数配置，设置要上传url以及事件处理函数，new一个AjaxUploadX对象，调用selectFiles方法选择文件，调用uplaod方法上传。
HttpServletRequestWrapper应用（二）：包装文件上传请求
03-19
NULL 博文链接：https://jiaguwen123.iteye.com/blog/714139
html5 文件分块上传,使用html5分块上传文件
weixin_31874603的博客
06-09 181
我正在尝试使用html5的FileAPI批量上传文件，然后在php的服务器端重新组装它。我正在上传视频，但是当我在服务器端合并文件时，文件大小增加了，并且变成了无效文件。请注意，以下html5代码仅适用于chrome浏览器。在Chrome9中进行了测试，因为它使用了文件API的slice函数。有人可以指导我吗？谢谢PHP源码$target_path = "uploads/";$tmp_name =...
xmlhttp 传递变量消失_Chrome 下，重复使用 XMLHttpRequest进行Post数据时，遇到一个奇怪的问题...
weixin_39587822的博客
12-20 261
varhttp_request;//在外面申明对象,主要为了在updatePage中使用//无刷新更新内容functionpost(url,parameter){if(http_request==null){http_request=getHttpRequest();}if(!http_request){alert("XMLHttpRequest初始化失败!");}else{//在u...
XMLHttpRequest 分割上传文件显示进度
yihaoxue的博客
08-09 217
   xhr = new XMLHttpRequest();  var clock = null;    //file选择，触发定时器函数  function upload(){      clock = window.setInterval(selectfile,1000);      //定时1s  }    //闭包函数  var selectfile = (func...
前端文件上传3：使用xmlhttprequest上传图片（web项目）
胡世林的博客
01-19 7341
本来之前写过一篇博客，也是使用ajax来上传的图片，但是发现适应性不是那么好，可能是后台做了一些处理吧，然后就自己重新写了个后台（单文件上传），重新写一份代码来上传文件后台代码是用springmvc，还是最最简单的那个，只是存储方面放在了七牛云上前端js代码：（这回与前两回不一样，不使用mui，不使用jq，直接使用原生的xmlhttprequest）
利用XMLHttpRequest level 2 实现文件异步上传
拌面鲈鱼的博客
01-22 2349
使用XMLHttpRequest 实现html文件异步上传
XMLHttpRequest文件上传，并显示进度条
px459的博客
06-05 1548
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 5
使用Ajax和HTML5在MVC中实现文件上传与进度显示
"MVC中基于Ajax和HTML5实现文件上传功能" 在现代Web开发中，文件上传是一个常见的需求，而HTML5的File API和XMLHttpRequest2（XHR2）的引入，使得无需依赖Flash或其他第三方插件，就能够实现更加优雅且功能强大的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值