webuploader+php 大文件切片上传

最新推荐文章于 2024-07-01 10:24:41 发布
最新推荐文章于 2024-07-01 10:24:41 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： 上传 文章标签： webuploader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1394916730/article/details/101547115
版权

处理上传大文件的方法

/**
 * @param $files    //要上传的文件
 * @param $request    //请求的所有数据
 * @param $videoType        //视频类型
 * @return file_name 文件路径 error错误类型
 */
function uploadVideo($files,$request,$videoType)
{
    //视频最大限制
    $fileSize= config('founder_video.maxSize');

    //允许上传文件格式
    $typeArr = config('founder_video.exts');

    $user_id = rsa_openssl(cookie('user_id'),'decode');

    $targetDir = ROOT_PATH.'public'.DS.'uploads'.DS.'media'.DS.'video_tmp';//临时路径
    $uploadDir = ROOT_PATH.'public'.DS.'uploads'.DS.'media'.DS.'video'.DS.date('Ymd',time());   //更新路径
    $path_upload = 'uploads'.DS.'media'.DS.'video'.DS.date('Ymd',time());   //要上传的路径

    $cleanupTargetDir = true; // Remove old files
    $maxFileAge = 5 * 3600; // Temp file age in seconds

    // 1 hours execution time
    @set_time_limit(1 * 60 * 60);

// Create target dir
    if (!file_exists($targetDir)) {
        @mkdir($targetDir);
    }

// Create target dir
    if (!file_exists($uploadDir)) {
        @mkdir($uploadDir);
    }

// Get a file name
    if($files){
        $name = $files['name'];
        $size = $files['size'];
        $name_tmp = $files['tmp_name'];

        if (empty($name)) {
            return ["error" => "error_notImg"];//您还未选择图片
        }
        //获取文件类型
        $type = strtolower(substr(strrchr($name, '.'), 1));
        if (!in_array($type, $typeArr)) {
            return ["error" => "error_type"];//请上传mp4类型的图片！
        }

        //上传大小
        if ($fileSize!==0&&$size >$fileSize) {
            return ["error" => "error_size"];//图片大小已超过5m！
        }

        //文件名称生成规则
        $ip = getClientIP();//真实ip
        $new_min_sec = str_replace('0.','',(string)round(explode(' ',microtime())[0],4));//取毫秒数的前四位，不含'0.'
        $new_name_tmp = substr(md5($ip.$name.$user_id),8,16);   //临时文件名称
        $new_file_name = substr(md5($videoType.time().$new_min_sec.$ip),8,16);

        $filePath = $targetDir . DS .$new_name_tmp.'.'.$type;          //临时文件路径
        //避免文件重复
        $i = 0;
        do {
            $i++;
            $uploadPath = $uploadDir . DS . $new_file_name.$i.$user_id.'.'.$type;           //更新文件路径
            $path_file_name = $path_upload . DS . $new_file_name.$i.$user_id.'.'.$type;           //更新文件路径

        }while(is_file($uploadPath));

        // Chunking might be enabled
        $chunk = isset($request["chunk"]) ? intval($request["chunk"]) : 0;
        $chunks = isset($request["chunks"]) ? intval($request["chunks"]) : 1;


        // Remove old temp files
        if ($cleanupTargetDir) {
            if (!is_dir($targetDir) || !$dir = opendir($targetDir)) {
                return ['error'=>'{"code": 100, "message": "Failed to open temp directory."}, "id" : "id"}'];
            }

            while (($file = readdir($dir)) !== false) {
                $tmpfilePath = $targetDir . DIRECTORY_SEPARATOR . $file;

                // If temp file is current file proceed to the next
                if ($tmpfilePath == "{$filePath}_{$chunk}.part" || $tmpfilePath == "{$filePath}_{$chunk}.parttmp") {
                    continue;
                }

                // Remove temp file if it is older than the max age and is not the current file
                if (preg_match('/\.(part|parttmp)$/', $file) && (@filemtime($tmpfilePath) < time() - $maxFileAge)) {
                    @unlink($tmpfilePath);
                }
            }
            closedir($dir);
        }


        // Open temp file
        if (!$out = @fopen("{$filePath}_{$chunk}.parttmp", "wb")) {
            return ['error'=>'{"code": 102, "message": "Failed to open output stream."}, "id" : "id"}'];
        }

        if (!empty($files)) {
            if ($files["error"] || !is_uploaded_file($files["tmp_name"])) {
                return ['error'=>'{"code": 103, "message": "Failed to move uploaded file."}, "id" : "id"}'];
            }

            // Read binary input stream and append it to temp file
            if (!$in = @fopen($files["tmp_name"], "rb")) {
                return ['error'=>'{"code": 101, "message": "Failed to open input stream."}, "id" : "id"}'];
            }
        } else {
            if (!$in = @fopen("php://input", "rb")) {
                return ['error'=>'{"code": 101, "message": "Failed to open input stream."}, "id" : "id"}'];
            }
        }

        while ($buff = fread($in, 4096)) {
            fwrite($out, $buff);
        }

        @fclose($out);
        @fclose($in);

        rename("{$filePath}_{$chunk}.parttmp", "{$filePath}_{$chunk}.part");

        $index = 0;
        $done = true;
        for( $index = 0; $index < $chunks; $index++ ) {
            if ( !file_exists("{$filePath}_{$index}.part") ) {
                $done = false;
                break;
            }
        }
        if ( $done ) {
            if (!$out = @fopen($uploadPath, "wb")) {
                return ['error'=>'{"code": 102, "message": "Failed to open output stream."}, "id" : "id"}'];
            }

            if ( flock($out, LOCK_EX) ) {
                for( $index = 0; $index < $chunks; $index++ ) {
                    if (!$in = @fopen("{$filePath}_{$index}.part", "rb")) {
                        break;
                    }

                    while ($buff = fread($in, 4096)) {
                        fwrite($out, $buff);
                    }

                    @fclose($in);
                    @unlink("{$filePath}_{$index}.part");
                }

                flock($out, LOCK_UN);
            }
            @fclose($out);
        }
        return ['file_name'=>$path_file_name];
    }

}

PHP处理上传的大文件：

$file = $_FILES['file'];
$request = $_REQUEST;
$data = uploadVideo($file,$request,1);
if(isset($data['error'])){
    return json(['code'=>201,'error'=>$data['error']]);
}
$old_file = config('path').$data['file_name'];//MP4文件

$upload_path = config('path').'uploads/media/video/'.date('Ymd');//保存的文件目录

//判断文件夹是否存在，不存在则创建
if (!file_exists($upload_path)) {
    mkdir($upload_path);
}

$ip = $_SERVER["REMOTE_ADDR"];
$user_id = rsa_openssl(cookie('user_id'),'decode'); //用户id
$md5_time = substr(md5(time().$ip.$user_id),8,16);  //文件名称生成规则

//ts文件路径
$ts_file_path = $upload_path.'/'.$md5_time.".ts";
//转换为ts文件
if (file_exists($old_file))
{

    exec("ffmpeg -y -i {$old_file} -vcodec copy -acodec copy -vbsf h264_mp4toannexb {$ts_file_path}");

    if (file_exists($ts_file_path))
    {
        //删除MP4文件
        exec("rm {$old_file}");
        //转为m3u8，并切片
        $m3u8_path = $upload_path.'/'.$md5_time;
        exec("ffmpeg -i {$ts_file_path} -c copy -map 0 -f segment -segment_list {$m3u8_path}.m3u8 -segment_time 5 {$m3u8_path}%03d.ts");
        if (file_exists($m3u8_path.'.m3u8'))
        {
            exec("rm $ts_file_path");//删除 MP4 => ts的文件
            $m3u8 = 'uploads/media/video/'.date('Ymd').'/'.$md5_time.'.m3u8';
            Db::table('media')->where('id',$media_id)->update(['video' => $m3u8]);
        }

    }
}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多图上传可拖拽jQuery特效 - 站长素材</title>

<link rel="stylesheet" type="text/css" href="__ADMIN__/webuploader/css/webuploader.css" />
<link rel="stylesheet" type="text/css" href="__ADMIN__/webuploader/css/style.css" />
<style>
   .width_auto{
      width: 900px;
      margin: 100px auto;
   }
</style>

</head>
<body>
<div class="width_auto">
    <div id="container">
        <!--头部，相册选择和格式选择-->
        <div id="uploader" >

            <div class="item_container">
                <div id="" class="queueList" >
                    <div id="dndArea" class="placeholder">
                        <div id="filePicker"></div>
                    </div>
                </div>
            </div>
            <div class="statusBar" style="display:none;">
                <div class="progress">
                    <span class="text">0%</span>
                    <span class="percentage"></span>
                </div><div class="info"></div>
                <div class="btns">
                    <div id="filePicker2" data-url="{:url('extra/test/test',[],'',true)}"></div><div class="uploadBtn">开始上传</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="__ADMIN__/webuploader/js/jquery-1.9.min.js"></script>
<script src="__ADMIN__/webuploader/js/webuploader.js"></script>
<script src="__ADMIN__/webuploader/js/jquery.sortable.js"></script>
<script src="__ADMIN__/webuploader/js/uploadVideo.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>

uploadVideo.js:

(function( $ ){

    // 当domReady的时候开始初始化
    $(function() {
    
        var $wrap = $('#uploader'),
        
            // 图片容器
            $queue = $( '<ul class="filelist"></ul>' )
                .appendTo( $wrap.find( '.queueList' ) ),
                
            // 状态栏，包括进度和控制按钮
            $statusBar = $wrap.find( '.statusBar' ),

            // 文件总体选择信息。
            $info = $statusBar.find( '.info' ),

            // 上传按钮
            $upload = $wrap.find( '.uploadBtn' ),

            // 没选择文件之前的内容。
            $placeHolder = $wrap.find( '.placeholder' ),

            $progress = $statusBar.find( '.progress' ).hide(),

            // 添加的文件数量
            fileCount = 0,

            // 添加的文件总大小
            fileSize = 0,

            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,

            // 缩略图大小
            thumbnailWidth = 110 * ratio,
            thumbnailHeight = 110 * ratio,

            // 可能有pedding, ready, uploading, confirm, done.
            state = 'pedding',

            // 所有文件的进度信息，key为file id
            percentages = {},
            // 判断浏览器是否支持图片的base64
            isSupportBase64 = ( function() {
                var data = new Image();
                var support = true;
                data.onload = data.onerror = function() {
                    if( this.width != 1 || this.height != 1 ) {
                        support = false;
                    }
                }
                data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
                return support;
            } )(),

            // 检测是否已经安装flash，检测flash的版本
            flashVersion = ( function() {
                var version;

                try {
                    version = navigator.plugins[ 'Shockwave Flash' ];
                    version = version.description;
                } catch ( ex ) {
                    try {
                        version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
                            .GetVariable('$version');
                    } catch ( ex2 ) {
                        version = '0.0';
                    }
                }
                version = version.match( /\d+/g );
                return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );
            } )(),

            supportTransition = (function(){
                var s = document.createElement('p').style,
                    r = 'transition' in s ||
                        'WebkitTransition' in s ||
                        'MozTransition' in s ||
                        'msTransition' in s ||
                        'OTransition' in s;
                s = null;
                return r;
            })(),

            // WebUploader实例
            uploader;

        if ( !WebUploader.Uploader.support('flash') && WebUploader.browser.ie ) {

            // flash 安装了但是版本过低。
            if (flashVersion) {
                (function(container) {
                    window['expressinstallcallback'] = function( state ) {
                        switch(state) {
                            case 'Download.Cancelled':
                                alert('您取消了更新！')
                                break;

                            case 'Download.Failed':
                                alert('安装失败')
                                break;

                            default:
                                alert('安装已成功，请刷新！');
                                break;
                        }
                        delete window['expressinstallcallback'];
                    };

                    var swf = './expressInstall.swf';
                    // insert flash object
                    var html = '<object type="application/' +
                        'x-shockwave-flash" data="' +  swf + '" ';

                    if (WebUploader.browser.ie) {
                        html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';
                    }

                    html += 'width="100%" height="100%" style="outline:0">'  +
                        '<param name="movie" value="' + swf + '" />' +
                        '<param name="wmode" value="transparent" />' +
                        '<param name="allowscriptaccess" value="always" />' +
                        '</object>';

                    container.html(html);

                })($wrap);

                // 压根就没有安转。
            } else {
                $wrap.html('<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img alt="get flash player" src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg" /></a>');
            }

            return;
        } else if (!WebUploader.Uploader.support()) {
            alert( 'Web Uploader 不支持您的浏览器！');
            return;
        }
        var url = $('#filePicker2').attr('data-url')
        // 实例化
        uploader = WebUploader.create({
            pick: {
                id: '#filePicker',
                label: '点击选择文件'
            },
            formData: {
                uid: 123
            },
            dnd: '#dndArea',
            paste: '#uploader',
            swf: '../server/Uploader.swf',
            chunked: true,
            chunkSize: 5 *1024*1024,   //2 *1024* 1024 *1024
            server: url,
            method:'POST',
            // runtimeOrder: 'flash',

            // accept: {
            //     title: 'Images',
            //     extensions: 'gif,jpg,jpeg,bmp,png',
            //     mimeTypes: 'image/*'
            // },

            // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
            disableGlobalDnd: true,
            fileNumLimit: 300,
            fileSizeLimit: 70 * 1024 * 1024 *1024,    // 7000 M
            fileSingleSizeLimit: 20 * 1024 * 1024 *1024    // 2000 M
        });

        // 拖拽时不接受 js, txt 文件。
        uploader.on( 'dndAccept', function( items ) {
            var denied = false,
                len = items.length,
                i = 0,
                // 修改js类型
                unAllowed = 'text/plain;application/javascript ';

            for ( ; i < len; i++ ) {
                // 如果在列表里面
                if ( ~unAllowed.indexOf( items[ i ].type ) ) {
                    denied = true;
                    break;
                }
            }

            return !denied;
        });

        // uploader.on('filesQueued', function() {
        //     uploader.sort(function( a, b ) {
        //         if ( a.name < b.name )
        //           return -1;
        //         if ( a.name > b.name )
        //           return 1;
        //         return 0;
        //     });
        // });

        // 添加“添加文件”的按钮，
        uploader.addButton({
            id: '#filePicker2',
            label: '继续添加'
        });
        // 添加“添加下一个”模型的按钮，
        /*uploader.addButton({
            id: '#addModel',
            label: '添加下一个'
        });*/
        uploader.on('ready', function() {
            window.uploader = uploader;
        });

        // 当有文件添加进来时执行，负责view的创建
        function addFile( file ) {
            var $li = $( '<li id="' + file.id + '">' +
                '<p class="title">' + file.name + '</p>' +
                '<p class="imgWrap"></p>'+
                '<p class="progress"><span></span></p>' +
                '</li>' ),

                $btns = $('<div class="file-panel">' +
                    '<span class="cancel">删除</span>' +
                    '<span class="rotateRight">向右旋转</span>' +
                    '<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ),
                $prgress = $li.find('p.progress span'),
                $wrap = $li.find( 'p.imgWrap' ),
                $info = $('<p class="error"></p>'),

                showError = function( code ) {
                    switch( code ) {
                        case 'exceed_size':
                            text = '文件大小超出';
                            break;

                        case 'interrupt':
                            text = '上传暂停';
                            break;

                        default:
                            text = '上传失败，请重试';
                            break;
                    }

                    $info.text( text ).appendTo( $li );
                };

            if ( file.getStatus() === 'invalid' ) {
                showError( file.statusText );
            } else {
                // @todo lazyload
                $wrap.text( '预览中' );
                uploader.makeThumb( file, function( error, src ) {
                    var img;

                    if ( error ) {
                        $wrap.text( '不能预览' );
                        return;
                    }

                    if( isSupportBase64 ) {
                        img = $('<img src="'+src+'">');
                        $wrap.empty().append( img );
                    } else {
                        $.ajax('../server/preview.php', {
                            method: 'POST',
                            data: src,
                            dataType:'json'
                        }).done(function( response ) {
                            if (response.result) {
                                img = $('<img src="'+response.result+'">');
                                $wrap.empty().append( img );
                            } else {
                                $wrap.text("预览出错");
                            }
                        });
                    }
                }, thumbnailWidth, thumbnailHeight );

                percentages[ file.id ] = [ file.size, 0 ];
                file.rotation = 0;
            }

            file.on('statuschange', function( cur, prev ) {
                if ( prev === 'progress' ) {
                    $prgress.hide().width(0);
                } else if ( prev === 'queued' ) {
                    $li.off( 'mouseenter mouseleave' );
                    $btns.remove();
                }

                // 成功
                if ( cur === 'error' || cur === 'invalid' ) {
                    console.log( file.statusText );
                    showError( file.statusText );
                    percentages[ file.id ][ 1 ] = 1;
                } else if ( cur === 'interrupt' ) {
                    showError( 'interrupt' );
                } else if ( cur === 'queued' ) {
                    percentages[ file.id ][ 1 ] = 0;
                } else if ( cur === 'progress' ) {
                    $info.remove();
                    $prgress.css('display', 'block');
                } else if ( cur === 'complete' ) {
                    $li.append( '<span class="success"></span>' );
                }

                $li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );
            });

            $li.on( 'mouseenter', function() {
                $btns.stop().animate({height: 30});
            });

            $li.on( 'mouseleave', function() {
                $btns.stop().animate({height: 0});
            });

            $btns.on( 'click', 'span', function() {
                var index = $(this).index(),
                    deg;

                switch ( index ) {
                    case 0:
                        uploader.removeFile( file );
                        return;

                    case 1:
                        file.rotation += 90;
                        break;

                    case 2:
                        file.rotation -= 90;
                        break;
                }

                if ( supportTransition ) {
                    deg = 'rotate(' + file.rotation + 'deg)';
                    $wrap.css({
                        '-webkit-transform': deg,
                        '-mos-transform': deg,
                        '-o-transform': deg,
                        'transform': deg
                    });
                } else {
                    $wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
                    // use jquery animate to rotation
                    // $({
                    //     rotation: rotation
                    // }).animate({
                    //     rotation: file.rotation
                    // }, {
                    //     easing: 'linear',
                    //     step: function( now ) {
                    //         now = now * Math.PI / 180;

                    //         var cos = Math.cos( now ),
                    //             sin = Math.sin( now );

                    //         $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
                    //     }
                    // });
                }


            });

            $li.appendTo( $queue );
        }

        // 负责view的销毁
        function removeFile( file ) {
            var $li = $('#'+file.id);

            delete percentages[ file.id ];
            updateTotalProgress();
            $li.off().find('.file-panel').off().end().remove();
        }

        function updateTotalProgress() {
            var loaded = 0,
                total = 0,
                spans = $progress.children(),
                percent;

            $.each( percentages, function( k, v ) {
                total += v[ 0 ];
                loaded += v[ 0 ] * v[ 1 ];
            } );

            percent = total ? loaded / total : 0;


            spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );
            spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );
            updateStatus();
        }

        function updateStatus() {
            var text = '', stats;

            if ( state === 'ready' ) {
                text = '选中' + fileCount + '张图片，共' +
                    WebUploader.formatSize( fileSize ) + '。';
            } else if ( state === 'confirm' ) {
                stats = uploader.getStats();
                if ( stats.uploadFailNum ) {
                    text = '已成功上传' + stats.successNum+ '文件，'+
                        stats.uploadFailNum + '文件上传失败，<a class="retry" href="#">重新上传</a>失败或<a class="ignore" href="#">忽略</a>'
                }

            } else {
                stats = uploader.getStats();
                text = '共' + fileCount + '个（' +
                    WebUploader.formatSize( fileSize )  +
                    '），已上传' + stats.successNum + '个';

                if ( stats.uploadFailNum ) {
                    text += '，失败' + stats.uploadFailNum + '个';
                }
            }

            $info.html( text );
        }

        function setState( val ) {
            var file, stats;

            if ( val === state ) {
                return;
            }

            $upload.removeClass( 'state-' + state );
            $upload.addClass( 'state-' + val );
            state = val;

            switch ( state ) {
                case 'pedding':
                    $placeHolder.removeClass( 'element-invisible' );
                    $queue.hide();
                    $statusBar.addClass( 'element-invisible' );
                    uploader.refresh();
                    break;

                case 'ready':
                    $placeHolder.addClass( 'element-invisible' );
                    $( '#filePicker2' ).removeClass( 'element-invisible');
                    $queue.show();
                    $statusBar.removeClass('element-invisible');
                    uploader.refresh();
                    break;

                case 'uploading':
                    $( '#filePicker2' ).addClass( 'element-invisible' );
                    $progress.show();
                    $upload.text( '暂停上传' );
                    break;

                case 'paused':
                    $progress.show();
                    $upload.text( '继续上传' );
                    break;

                case 'confirm':
                    $progress.hide();
                    $( '#filePicker2' ).removeClass( 'element-invisible' );
                    $upload.text( '开始上传' );
                    /*$('#filePicker2 + .uploadBtn').click(function () {
                        window.location.reload();
                    });*/
                    stats = uploader.getStats();
                    if ( stats.successNum && !stats.uploadFailNum ) {
                        setState( 'finish' );
                        return;
                    }
                    break;
                case 'finish':
                    stats = uploader.getStats();
                    if ( stats.successNum ) {
                        document.getElementById("shareUrl").style.visibility = 'visible';
                        createQrcode();
                    } else {
                        // 没有成功的图片，重设
                        state = 'done';
                        location.reload();
                    }
                    break;
            }

            updateStatus();
        }

        uploader.onUploadProgress = function( file, percentage ) {
            var $li = $('#'+file.id),
                $percent = $li.find('.progress span');

            $percent.css( 'width', percentage * 100 + '%' );
            percentages[ file.id ][ 1 ] = percentage;
            updateTotalProgress();
        };

        uploader.onFileQueued = function( file ) {
            fileCount++;
            fileSize += file.size;

            if ( fileCount === 1 ) {
                $placeHolder.addClass( 'element-invisible' );
                $statusBar.show();
            }

            addFile( file );
            setState( 'ready' );
            updateTotalProgress();
        };

        uploader.onFileDequeued = function( file ) {
            fileCount--;
            fileSize -= file.size;

            if ( !fileCount ) {
                setState( 'pedding' );
            }

            removeFile( file );
            updateTotalProgress();

        };

        uploader.on( 'all', function( type ) {
            var stats;
            switch( type ) {
                case 'uploadFinished':
                    setState( 'confirm' );
                    break;

                case 'startUpload':
                    setState( 'uploading' );
                    break;

                case 'stopUpload':
                    setState( 'paused' );
                    break;

            }
        });

        uploader.onError = function( code ) {
            alert( 'Eroor: ' + code );
        };

        $upload.on('click', function() {
            if ( $(this).hasClass( 'disabled' ) ) {
                return false;
            }

            if ( state === 'ready' ) {
                uploader.upload();
            } else if ( state === 'paused' ) {
                uploader.upload();
            } else if ( state === 'uploading' ) {
                uploader.stop();
            }
        });

        $info.on( 'click', '.retry', function() {
            uploader.retry();
        } );

        $info.on( 'click', '.ignore', function() {
            alert( 'todo' );
        } );

        $upload.addClass( 'state-' + state );
        updateTotalProgress();
    });

})( jQuery );

Style.CSS:

/* ------------ */
#wrapper {
    width: 980px;
    margin: 0 auto;

    margin: 1em;
    width: auto;
}

#container {
    border: 1px solid #dadada;
    color: #838383;
    font-size: 12px;
    margin: 10px;
    background-color: #FFF;
}

#uploader .queueList {
    margin: 20px;
}

.element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}

#uploader .placeholder {
    border: 3px dashed #e6e6e6;
    min-height: 238px;
    padding-top: 158px;
    text-align: center;
    background: url(../images/image.png) center 93px no-repeat;
    color: #cccccc;
    font-size: 18px;
    position: relative;
}

#uploader .placeholder .webuploader-pick {
    font-size: 18px;
    background: #54b432;
    border-radius: 3px;
    line-height: 44px;
    padding: 0 30px;
    color: #fff;
    display: inline-block;
    margin: 20px auto;
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

#uploader .placeholder .webuploader-pick-hover {
    background: #54b432;
}

#uploader .placeholder .flashTip {
    color: #666666;
    font-size: 12px;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 20px;
}
#uploader .placeholder .flashTip a {
    color: #54b432;
    text-decoration: none;
}
#uploader .placeholder .flashTip a:hover {
    text-decoration: underline;
}

#uploader .placeholder.webuploader-dnd-over {
    border-color: #999999;
}

#uploader .placeholder.webuploader-dnd-over.webuploader-dnd-denied {
    border-color: red;
}

#uploader .filelist {
    list-style: none;
    margin: 0;
    padding: 0;
}

#uploader .filelist:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    clear: both;
}

#uploader .filelist li {
    width: 110px;
    height: 110px;
    background: url(../images/bg.png) no-repeat;
    text-align: center;
    margin: 0 8px 20px 0;
    position: relative;
    display: inline;
    float: left;
    overflow: hidden;
    font-size: 12px;
}

#uploader .filelist li p.log {
    position: relative;
    top: -45px;
}

#uploader .filelist li p.title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow : ellipsis;
    top: 5px;
    text-indent: 5px;
    text-align: left;
}

#uploader .filelist li p.progress {
    position: absolute;
    width: 100%;
    bottom: -20px;
    left: 0;
    height: 8px;
    overflow: hidden;
    z-index: 50;
}
#uploader .filelist li p.progress span {
    display: none;
    overflow: hidden;
    width: 0;
    height: 100%;
    background: #54b432 url(../images/progress.png) repeat-x;

    -webit-transition: width 200ms linear;
    -moz-transition: width 200ms linear;
    -o-transition: width 200ms linear;
    -ms-transition: width 200ms linear;
    transition: width 200ms linear;

    -webkit-animation: progressmove 2s linear infinite;
    -moz-animation: progressmove 2s linear infinite;
    -o-animation: progressmove 2s linear infinite;
    -ms-animation: progressmove 2s linear infinite;
    animation: progressmove 2s linear infinite;

    -webkit-transform: translateZ(0);
}

@-webkit-keyframes progressmove {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 17px 0;
    }
}
@-moz-keyframes progressmove {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 17px 0;
    }
}
@keyframes progressmove {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 17px 0;
    }
}

#uploader .filelist li p.imgWrap {
    position: relative;
    z-index: 2;
    line-height: 110px;
    vertical-align: middle;
    overflow: hidden;
    width: 110px;
    height: 110px;

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webit-transition: 200ms ease-out;
    -moz-transition: 200ms ease-out;
    -o-transition: 200ms ease-out;
    -ms-transition: 200ms ease-out;
    transition: 200ms ease-out;
}

#uploader .filelist li img {
    width: 100%;
}

#uploader .filelist li p.error {
    background: #f43838;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 28px;
    line-height: 28px;
    width: 100%;
    z-index: 100;
}

#uploader .filelist li .success {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 40px;
    width: 100%;
    z-index: 200;
    background: url(../images/success.png) no-repeat right bottom;
}

#uploader .filelist div.file-panel {
    position: absolute;
    height: 0;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0;
    background: rgba( 0, 0, 0, 0.5 );
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 300;
}

#uploader .filelist div.file-panel span {
    width: 24px;
    height: 24px;
    display: inline;
    float: right;
    text-indent: -9999px;
    overflow: hidden;
    background: url(../images/icons.png) no-repeat;
    margin: 5px 1px 1px;
    cursor: pointer;
}

#uploader .filelist div.file-panel span.rotateLeft {
    background-position: 0 -24px;
}
#uploader .filelist div.file-panel span.rotateLeft:hover {
    background-position: 0 0;
}

#uploader .filelist div.file-panel span.rotateRight {
    background-position: -24px -24px;
}
#uploader .filelist div.file-panel span.rotateRight:hover {
    background-position: -24px 0;
}

#uploader .filelist div.file-panel span.cancel {
    background-position: -48px -24px;
}
#uploader .filelist div.file-panel span.cancel:hover {
    background-position: -48px 0;
}

#uploader .statusBar {
    height: 63px;
    border-top: 1px solid #dadada;
    padding: 0 20px;
    line-height: 63px;
    vertical-align: middle;
    position: relative;
}

#uploader .statusBar .progress {
    border: 1px solid #54b432;
    width: 198px;
    background: #fff;
    height: 18px;
    position: relative;
    display: inline-block;
    text-align: center;
    line-height: 20px;
    color: #54b432;
    position: relative;
    margin-right: 10px;
}
#uploader .statusBar .progress span.percentage {
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    background: #54b432;
    position: absolute;
}
#uploader .statusBar .progress span.text {
    position: relative;
    z-index: 10;
}

#uploader .statusBar .info {
    display: inline-block;
    font-size: 14px;
    color: #666666;
}

#uploader .statusBar .btns {
    position: absolute;
    top: 10px;
    right: 20px;
    line-height: 40px;
}

#filePicker2 {
    display: inline-block;
    float: left;
}

#uploader .statusBar .btns .webuploader-pick,
#uploader .statusBar .btns .uploadBtn,
#uploader .statusBar .btns .uploadBtn.state-uploading,
#uploader .statusBar .btns .uploadBtn.state-paused {
    background: #ffffff;
    border: 1px solid #cfcfcf;
    color: #565656;
    padding: 0 18px;
    display: inline-block;
    border-radius: 3px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
    float: left;
}
#uploader .statusBar .btns .webuploader-pick-hover,
#uploader .statusBar .btns .uploadBtn:hover,
#uploader .statusBar .btns .uploadBtn.state-uploading:hover,
#uploader .statusBar .btns .uploadBtn.state-paused:hover {
    background: #f0f0f0;
}

#uploader .statusBar .btns .uploadBtn {
    background: #54b432;
    color: #fff;
    border-color: transparent;
}
#uploader .statusBar .btns .uploadBtn:hover {
    background: #54b432;
}

#uploader .statusBar .btns .uploadBtn.disabled {
    pointer-events: none;
    opacity: 0.6;
}

webuploader下载地址：

http://fex.baidu.com/webuploader/download.html

注：

我是用thinkphp5.0做上面的文件上传，里面有一些参数是我项目里面使用的，故不能直接拿来就用，要修改里面的一下参数。像，这里的__ADMIN__就是我项目里配好的。

a1394916730
关注
专栏目录
WebUploader+SpringMVC 完成前端文件分片上传与后台分片文件合并
码
07-25 1385
最近看了WebUploader文件上传组件,功能很强大但是官方的文档是给我看吐了。 废了好几头牛的力气终于写了一篇Demo,分享一下也方便以后自己查看 大致上传流程 代码 因为是篇Demo,所以可能有很多不足的地方,代码我都标记了注释 去官网下载WebUploader的包 WebUploader官网 还需要引入jQuery.js 下面是前端代码 <%@ page c...
thinkphp6+webuploader实现大文件(视频)分片上传/本地保存或上传OSS
程序员张礼奎的博客
11-10 5233
thinkPHP6+webuploader分片上传大视频的解决方案: ①能解决视频太大，1G、2G直传服务器压力过大 ②部分追求完美的人不发接受直传，那只能分片上传 ③分片上传是我找到的比较合理的解决方案 ④我感觉这个方案只是能用，肯定还有优化的空间，如有大佬看到欢迎指点 ⑤综合各路大佬的代码进行修改 可以接受不分片上传的直接不要往下看，直接去这里设置： Nginx上传大文件响应超时设置,TP6响应超时设置 前端代码 <link rel="stylesheet" type="text/css" hr
webuploader MVC 切片上传-断点续传-秒传Demo
04-17
webuploader MVC 切片上传-断点续传-秒传Demo，内含使用说明
webuploader切片上传文件夹
Mr_Zang666的博客
09-06 143
文件夹数据库处理逻辑 publicclassDbFolder { JSONObject root; publicDbFolder() { this.root =newJSONObject(); this.root.put("f_id",""); this.root.put("f_nameLoc","根目录"); this.root.put("f_pid",""); ...
“保姆级”大文件上传教程 :切片上传 + 断点续传 + 秒传 + 暂停上传
最新发布
cpc980209的博客
07-01 4552
全网”保姆级“大文件上传超详细教程，有Vue2跟Vue3版本搭配Node，切片上传 + 断点续传 + 秒传 + 暂停上传。学完后直接狂虐甲方！
php结合web uploader插件实现分片上传文件
10-22
主要为大家详细介绍了php结合web uploader插件实现分片上传文件， 采用大文件分片并发上传，极大的提高了文件上传效率，感兴趣的小伙伴们可以参考一下
springboot+webuploader 实现大文件切片上传，兼容IE8+,chrome等浏览器，可运行
11-09
https://blog.csdn.net/weifangzjx/article/details/83898265
使用WebUploader实现分片断点上传文件功能（二）
08-28
主要为大家详细介绍了使用WebUploader实现分片断点上传文件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
thinkphp3.2 webuploader较大视频文件分段上传方法demo
06-27
本示例主要讨论如何在ThinkPHP 3.2 框架下，结合Webuploader实现较大视频文件的分段上传，并在服务器端完成视频的合并。 首先，我们了解分段上传的基本原理。当上传的文件过大时，将其分割成多个小块（通常为几MB）...
webuploader上传php实例示例demo
10-16
4.很多网上的fileupload.php文件，切片上传大于5M的成功，小于5m的失败，demo中的是已经经过优化。 5.demo中的php 还有 文件请配置适合自己框架的哦，给的demo都自己框架的，只需要把对应的替换掉即可。
html+php超大视频上传解决方案
09-11
总的来说，"html+php超大视频上传解决方案"是一个综合了前端和后端技术的实用策略，它利用Webuploader的切片上传功能，结合PHP的文件处理能力，解决了大视频文件上传的难题。在实际应用中，开发者需要根据具体需求和...
PHP实现大文件分片上传源码可上传几G的文件.rar
08-12
php源码实现大文件上传秒传。利用WebUploader实现上传几个G大文件单文件（分片）和 一次性上传多个文件
WebUploader上传超大文件和断点续传切片
yjjatqihc的博客
10-28 242
最近遇见一个需要上传超大大文件的需求，调研了七牛和腾讯云的切片分段上传功能，因此在此整理前端大文件上传相关功能的实现。 在某些业务中，大文件上传是一个比较重要的交互场景，如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大，或者网络条件不好时，上传的时间会比较长（要传输更多的报文，丢包重传的概率也更大），用户不能刷新页面，只能耐心等待请求完成。 下面从文件上传方式入手，整理大文件上传的思路，并给出了相关实例代码，由于PHP内置了比较方便的文件拆分和拼接方法，因此服务端代码使用PHP进
thinkphp+webuploader实现大文件分片上传
weixin_30814319的博客
03-21 1233
大文件分片上传，简单来说就是把大文件切分为小文件，然后再一个一个的上传，到最后由这些小文件再合并成原来的文件 webuploader下载地址及其文档：http://fex.baidu.com/webuploader/ webuploader涉及到分片配置的主要有以下参数，chunked，chunkSize，threads，其含义如下图所示 配置好之后，使用webuploader则会对文件...
百度WebUploader实现大文件上传
weixin_45525177的博客
08-11 326
总结一下大文件分片上传和断点续传的问题。因为文件过大（比如1G以上），必须要考虑上传过程网络中断的情况。http的网络请求中本身就已经具备了分片上传功能，当传输的文件比较大时，http协议自动会将文件切片（分块），但这不是我们现在说的重点，我们要做的事是保证在网络中断后1G的文件已上传的那部分在下次网络连接时不必再重传。所以我们本地在上传的时候，要将大文件进行分片，比如分成1024*1024B，即将大文件分成1M的片进行上传，服务器在接收后，再将这些片合并成原始文件，这就是分片的基本原理。断点续传要求本地要
php结合webuploader断点续传的实现
大智若愚的博客
11-14 2896
最近公司项目需要用到断点续传,所以记录一下其中的坑 使用到的主要技术 webuploader thinkphp5 断点续传的思路: 客户端: 1.获取文件md5(MD5是文件唯一标识,用来判断是否存在此文件,并且用作分片的文件夹名) 2.将文件分片 3.验证分片是否上传过,上传过直接跳过当前分片 3.上传分片到md5的文件夹(保存文件名建议按分...
富文本编辑器ueditor的简单实现，及编辑器加载的图片不自适应的问题
LeichunHong的博客
06-17 9003
1.在很多地方会用到富文本百度富文本编辑器 2.先下载文件包，引入到项目中如图： 3.在jsp里面引入js /ueditor/ueditor.config.js"> /ueditor/ueditor.all.js"> /ueditor/lang/zh-cn/zh-cn.js">4.在页面写上编辑器 5.不上传图片就ok了如果要上传图
webUploader上传demo 带php后台代码|源码
qq_25861247的博客
03-12 9145
多图上传做了好几次了，每次弄的时候都要找原来 写的，太不方便记录下来。 大家可以随意用 改。 效果如下   样式自己可以随意在改改、 注意 :   我写了一个文件 接的是前端 上传图片的 文件 拿到 tmp_name 自己 就可以自行 改造了，想怎么改造都可以。 个人觉得 程序到了 后台我 写入文件那一步，剩下的自己可以重新改造都行。经过测试。是可以的。也...
php使用webuploader前后端代码分享
weixin_41764619的博客
10-01 4397
WebUploader是由Baidu WebFE团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。 公司要做一个类似于论坛的网站，要用到图片上传功能，因为WebUploader兼容性比较好，所以我选择了它。 先看看完成时的样子。 恩，非常的小清新，效果也非常不错。 下面讲讲正式的使用。 前期准备工作 1，下载官方插件包，下载地址 https://github.com/fex...
php7.3 +vue 实现大文件切片上传
05-25
大文件切片上传是一种常见的文件上传方式，可以通过将大文件分成多个小文件，然后分别上传，最后在服务器端将这些小文件合并成一个完整的文件。这种方式可以避免上传大文件时网络不稳定或中断的情况，同时也可以减轻...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值