您所在的位置:首页 / 知识分享

PHP+WebUploader简单实现分块上传

2020.12.29

787

随着互联网的迅猛发展和广泛应用,越来越多的用户在操作图片上传、文件上传时会选择大文件。按以前将一个文件整体FORM上传到服务端,已不在适用。

       随着互联网的迅猛发展和广泛应用,越来越多的用户在操作图片上传、文件上传时会选择大文件。按以前将一个文件整体FORM上传到服务端,已不在适用。

这时我们需要将一个大文件按一定大小,在客户端(浏览器)切割,然后再在服务端整合这些文件内容块。这样我们就能将一个大文件较快上传到服务端了,或者 在说也不遇到大文件无法上传问题。

      这里我们使用PHP+WebUploader简单实现一个分块上传,首先我们实现客户端(浏览器):
    var uploader;
    // 初始化Web Uploader
    uploader = WebUploader.create({
        // 自动上传。
        auto: true,
        // swf文件路径
        swf: '/template/default/js/newajaxupload/Uploader.swf',
        // 文件接收服务端。
        server: uploadserverurl,
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建,可能是input元素,也可能是flash.
        pick: {
            id: '{$pickid}',
            innerHTML: '上传本地附件',
            multiple:true
        },
sendAsBinary:true,
duplicate:true,
compress:false,
chunked: true, //开启分块上传
            chunkSize: 5 * 1024 * 1024,//5M 一个分片
            chunkRetry: 3, //网络问题上传失败后重试次数
            threads: 1, //上传并发数
    });

    //进度...
    uploader.on('uploadProgress',function(file,percentage){

var proges = percentage * 100;
    proges -= 10;
$('.progssfile'+file.id).css( 'width', proges + '%' );

});
uploader.on('error', function( type ){
if ( type === 'Q_EXCEED_NUM_LIMIT' ) {
//alert('一次性最多允许上传9张图片!');
//return false;
}
$('{$pickid}_pro').html('选择上传文件失败!大小,格式是否正确!!');
$('.progessbar'+file.id).remove();
});
//最终完成...
uploader.on('uploadSuccess',function(file, response){

//console.log(file)
});

//询问是本次请求否上传成功
uploader.on( 'uploadAccept', function( file, response ) {
console.log(response);
fnamek = response.fnamek
});

//某次上传前...
    uploader.on('uploadBeforeSend', function (obj, data, headers) {
       console.log(obj);
 });


在服务端:

//文件
$fnamek= uniqid();
//分块上传同一文件标识..
$iptfnamek = empty($_GET['fnamek']) ? '' : trim(htmlspecialchars($_GET['fnamek']));
if(!empty($iptfnamek)){
//追加分块上传...
$fnamek = $iptfnamek;
}
$fname = $fnamek.'.'.$file['fileext'];
$fpn = $dirPath.$fname;
$filePath = $fpn.'.'.$file['fileext'];
$filethumbPath = $fpn.'_thumb.'.$file['fileext'];

if(file_exists($filePath)){
//存在就追加...
file_put_contents($filePath, file_get_contents("php://input"),FILE_APPEND);
}else{
file_put_contents($filePath, file_get_contents("php://input"));
}

最主要在于 文件名要保持同一个,这样才能追加操作,最后形成一个文件。


当然以为代码比较粗糙,有兴趣同学可看看七牛的分块上传。

相关新闻

用一篇干活,让设计师了解今年很火的“用户下沉”

2018.11.02

3872

@苏大牙牙牙 :身为设计师,我们习惯性的埋头专攻自己的专业,思考着像素级的细节,拿捏着细微的交互体验,讨论着新的动效方式,却常常忽略着我们所处的大环境,产品所面临的新困境。

你(可能)不知道的web api

2018.12.19

2567

作为前端er,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多。本篇文章主要选取了几个有趣且有用的webapi进行介绍,分别介绍其用法、用处以及浏览器支持度。

别废话,各种SQL到底加了什么锁?

2018.11.05

3004

锁分了这么多类型,又和事务隔离级别相关,又和索引相关,究竟能不能直接告诉我,一个SQL到底加了什么锁!?