ajax php 视频，大型文件上传

快来打我* 2022-05-08 13:18 161阅读 0赞

html页面

<!doctype html>
    <html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>HTML5 Ajax Uploader</title>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    
    <style>
            .upload_btn{ z-index: 1; border: none; background-color: #0e947a; width: 80px; height: 30px; font-size: 16px; color: #fff5d4;}
            .upload_cc{z-index:1; width: 80px; height: 30px; font-size: 16px;}
            .upload_btnss{width: 100%;float: left; height: 50px; line-height: 50px; text-align: center;}
            .upload_file{position: absolute; z-index: 99; width: 60px; opacity: 0; }
    </style>
    </head>
    
    <body>
    <div class="addBorder" id="imgDiv" style="min-height: 300px;">
    
    </div>
    <form id="imgForm">
        <input type="file" id="file" class="addBorder upload_file" onchange="loadImg()">
        <button type="button" class="upload_btn">获取图片</button>
    </form>
    
    <script>
        function loadImg(){
            var c= true;
            $.each($("#imgDiv video"),function (index) {
               if (index>3){
                   c = false;
               }
            })
            if (c===false){
                alert('最多只能上传5个视频');
                return false;
            }
            var blob = document.getElementById('file').files[0];
            var size = blob.size;
            var filename = blob.name;
            var price_sex  =1024*1024*2;
            var index = 0;
            var price_num = Math.ceil(size/price_sex);
            var start=0;
            var end;
            var cc = 1;
            while (start<size){
    
                end = start+price_sex;
                var chunk = blobSlice(blob,start,end);
                var slice_index = blob.name+index;
                var formData = new FormData();
                formData.append('file',chunk,filename);
                if (index===(price_num-1)){
                    formData.append('end',1);
                }
                $.ajax({
                    type:'POST',
                    url:"{:url('')}",
                    cache:false,
                    data:formData,
                    processData : false,
                    contentType : false,
                    dataType:'json',
                    success:function (data) {
                        if (data.data!==''){
                            $("#imgDiv").append('<video width="500" height="280" src="/'+data.data+'" width="100%" controls autoplay></video>');
                        }
                        cc++;
                    }
    
                });
                start = end;
                index++;
            }
        }
        function blobSlice(blob,startByte,endByte){
            if(blob.slice){
                return blob.slice(startByte,endByte);
            }
            if(blob.mozSlice){
                return blob.mozSlice(startByte,endByte);
            }
            if(blob.webkitSlice){
                return blob.webkitSlice(startByte,endByte);
            }
            return null;
        }
    </script>
    </body>
    </html>

PHP 处理

<?php
            if ($this->request->isAjax()){
                header('Access-Control-Allow-Origin:*');
                header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
                    $file = $_FILES['file'];
                    $ext_arr = explode('.',$file['name']);
                    $filename = md5($file['name']).".".$ext_arr[1];
                    $file_path = "upload/shipin/";
                    file_put_contents($file_path.$filename, file_get_contents($file['tmp_name']), FILE_APPEND);
                    $end = request()->post('end');
                    if ($end==1){
                        $data['store_id'] = $this->_store_id;
                        $data['urls'] = "/".$file_path.$filename;
                        $data['addtime'] = time();
                        Db::name("store_shipin")->where('store_id',$data['store_id'])->insert($data);
                        $this->success('上传成功','',$file_path.$filename);
                    }
            }