前端

使用方法：

<!-- 引入plupload文件 -->
<!-- moxie用来生成图片缩略图 -->
<script src="./plupload/js/moxie.js"></script>
<script src="./plupload/js/plupload.full.min.js"></script>
<script>//新建一个plupload对象，并设置相应的参数var uploader_img = new plupload.Uploader({runtimes: 'html5,flash,silverlight,html4', //上传方式顺序优先级browse_button: 'addimg', //选择图片按钮idcontainer: document.getElementById('img-box'), //容器url: "/index/user/uploadimg", //服务器接口地址flash_swf_url: "/public/assets/libs/plupload/js/Moxie.swf",silverlight_xap_url: "/public/assets/libs/plupload/js/Moxie.xap",multi_selection: true, //false为单图上传，true为多图上传chunk_size: "3mb",//分片上传，每片的大小filters: {max_file_size: '3000mb', //限制文件上传大小mime_types: [{title: "图片文件",extensions: "jpg,jpeg,png"//上传文件格式限制}, //限制文件上传格式]},init: {//init事件发生后触发PostInit: function () {//document.getElementById('filelist').innerHTML = '';},FilesAdded: function (up, files) { //文件选择之后的触发的方法for (var i = 0; i < files.length; i++) {var file_name = files[i].name; //文件名var file_size = files[i].size;//文件大小//构造html来更新UIvar html = '<div id="' + files[i].id + '" class="layui-col-md1 img-                    item draggable-element" ></div>';$(html).appendTo('#elements-container');//生成缩略图!function (i) {previewImage(files[i], function (imgsrc) {$('#' + files[i].id).append('<i class="layui-icon layui-icon-close"></i><img draggable="false" ondragstart="return false" src="' + imgsrc + '" /><p class="layui-elip">' + files[i].name + '</p>');})}(i);}//用来拖动图片进行排序$(function() {$('.draggable-element').arrangeable();});},UploadProgress: function (up, file) { //上传过程中调用的方法$('#img-progress').show();var percent = file.percent;element.progress('img', percent + '%');},FileUploaded: function (up, file, res) { //文件上传完成后，up:plupload对象，file:上传的文件相关信息，res:服务器返回的信息var return_msg = $.parseJSON(res.response);var file_info= return_msg.file_path;//添加表单元素var newimg = document.createElement('input');//设定input的属性newimg.type = 'hidden';newimg.name = 'imglist[]';newimg.value = file_info;newimg.class='layui-input';// //获取父元素var pNode = document.getElementById(file.id);pNode.appendChild(newimg);var input=$('#'+file.id).find('input');$(input).attr('name','imglist[]');Sign += 1;if (Sign == Sign_stop) {document.getElementById('form-confirm').click();}},Error: function (up, err) {//document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));}}});uploader_img.init();//初始化//plupload中为我们提供了mOxie对象//有关mOxie的介绍和说明请看：https://github.com/moxiecode/moxie/wiki/API//file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数// 生成缩略图function previewImage(file, callback) {if (!file || !/image\//.test(file.type)) return; //确保文件是图片if (file.type == 'image/gif') { //gif使用FileReader进行预览,因为mOxie.Image只支持jpg和pngvar gif = new moxie.file.FileReader();gif.onload = function () {callback(gif.result);gif.destroy();gif = null;};gif.readAsDataURL(file.getSource());} else {var image = new moxie.image.Image();image.onload = function () {image.downsize(150, 150);//先压缩一下要预览的图片,宽300，高300var imgsrc = file.type == 'image/jpeg' ? image.getAsDataURL('image/jpeg', 80) : image.getAsDataURL(); //得到图片src,实质为一个base64编码的数据callback && callback(imgsrc); //callback传入的参数为预览图片的urlimage.destroy();image = null;};image.load(file.getSource());}}
</script>

界面：

添加前端显示的为上传按钮

<div id="img-box"><!--添加按钮--><a href="javascript:void(0);" class="layui-btn" id="addimg">点击添加</a><!--上传文件信息及删除,拖拽排序--><div class="layui-row"><div id="elements-container"></div></div><!--上传进度条--><div class="layui-progress" id="img-progress" lay-filter="img" lay-showPercent="yes"><div class="layui-progress-bar" lay-percent="0%"></div></div>
</div>

添加文件之后的plupload对象

开始上传，可以选择添加之后立即上传（FilesAdded事件），也可以手动触发，方法为start();

 //上传图片uploader_img.setOption("multipart_params", {'caseName': caseName});//设置上传附带的参数uploader_img.start();

上传的xhr

PHP后台处理

上传类:

<?php
/*** Created by PhpStorm.* User: stone* Date: 2019.3.22* Time: 9:39*/namespace app\api\controller;class Upload
{/** 流程* 1.移动临时文件到指定目录* 2.判断是否是最后一块，并进行合并* 3.删除临时文件及目录* 4.返回相关信息*/private $file_path='';//上传目录private $temp_path='';//php文件临时目录private $blob_num;//第几片private $total_num;//总片数private $file_name;//文件名private $temp_name;//php上传的临时文件目录/***upload constructor.* @access  public* @param   string $filePath* @param   string|integer $blobNum* @param   string|integer $totalNum* @param   string $fileName* @param   string $tempName**/public function __construct($filePath,$blobNum,$totalNum,$fileName,$tempName){$this->file_path=$filePath;$this->blob_num=$blobNum;$this->total_num=$totalNum;$this->file_name=$fileName;$this->temp_name=$tempName;$this->temp_path=ROOT_PATH.'public/upload/';$this->moveFile();$this->mergeFile();}//移动临时文件private function moveFile(){$this->touchDir();//将php上传的临时文件移动到临时目录$filename=$this->temp_path.$this->file_name.'_'.$this->blob_num;move_uploaded_file($this->temp_name,$filename);}//合并文件private function mergeFile(){//当前分片序号（从0开始）等于总分片数-1if($this->blob_num==($this->total_num-1)){$blob='';//使用fopen//使用file_get(put)_contents//先判断文件是否已经存在if(file_exists($this->file_path.iconv('UTF-8','GB2312',$this->file_name))){@unlink($this->file_path.iconv('UTF-8','GB2312',$this->file_name));}for($i=0;$i<$this->total_num;$i++){$blob=file_get_contents($this->temp_path.$this->file_name.'_'.$i);$last_path=$this->file_path.$this->file_name;iconv('UTF-8','GB2312',$this->file_path.$this->file_name);file_put_contents($last_path,$blob,FILE_APPEND);}$this->deleteTempFile();}}//删除上传的临时文件private function deleteTempFile(){for($i=0;$i<$this->total_num;$i++){@unlink($this->temp_path.$this->file_name.'_'.$i);}}//创建文件架private function touchDir(){//上传目录if(!file_exists($this->file_path)){$oldmask=umask(0);@mkdir($this->file_path,0777,true);umask($oldmask);}//临时文件上传目录if(!file_exists($this->temp_path)){@mkdir($this->temp_path,0777,true);}return;}//API返回数据GBpublic function apiReturn(){if($this->blob_num==($this->total_num-1)){//修改文件权限$oldmask=umask(0);$res=chmod($this->file_path.$this->file_name,0777);umask($oldmask);$res1=$this->file_path.$this->file_name;$res2=file_exists($res1);if($res2){$data['code']=2;$data['msg']='success';$data['file_path']=$this->file_path.$this->file_name;}}else{if(file_exists($this->temp_path.$this->file_name.'_'.$this->blob_num)){$data['code']=1;$data['msg']='waiting for all';$data['file_path']='';}}return $data;}}

调用上传类

public function uploadImg(){if ($_FILES['file']['error'] == 0) {$caseName = trim($this->request->param('caseName'));//获取参数$file_path = ROOT_PATH . '/img/';//设置文件路径$blob_num = $this->request->param('chunk');//当前片数$total_num = $this->request->param('chunks');//总片数$file_name = $this->request->param('name');//文件名称$temp_name = $_FILES['file']['tmp_name'];//零时文件名称$uploadClass = new Upload($file_path, $blob_num, $total_num, $file_name, $temp_name);//实例化upload类，并传入相关参数$data = $uploadClass->apiReturn();return json_encode($data);} else {$data['code'] = 0;$data['msg'] = 'error code:' . $_FILES['file']['error'];$data['file_path'] = '';return json_encode($data);}}

上传成功后返回的信息：

上传成功之后，plupload对象会调用FileUploaded事件

 FileUploaded: function (up, file, res) {//文件上传完成后，up:plupload对象，file:上传的文件相关信息，res:服务器返回的信息//进行相关处理
}

上传过程中会调用UploadProgress事件

  UploadProgress: function (up, file) { //上传过程中调用的方法$('#img-progress').show();var percent = file.percent;element.progress('img', percent + '%');}

该方法可以用来控制进度条。

若有不足之处，敬请见谅！

plupload插件上传总结(分片上传，php后端处理）相关推荐

无插件实现大文件分片上传，断点续传
代码地址如下: http://www.demodashi.com/demo/11888.html 1. 简介: 本篇文章基于实际项目的开发,将介绍项目中关于大文件分片上传.文件验证.断点续传.手动重试 ...
文件上传、分片上传（react）
文件上传(整体上传) 关于上传功能,其实有很多的插件去支持.我这里使用原生的input标签进行上传功能的开发. i n d e x . j s x \color{green}{index.jsx} i ...
python分片上传_分片上传_分片上传_上传文件_Python_SDK 示例_对象存储 OSS - 阿里云...
OSS提供的分片上传(Multipart Upload)功能,将要上传的较大文件(Object)分成多个数据块(Part)来分别上传,上传完成后再调用CompleteMultipartUpload接口 ...
php对接百度网盘开发平台API开发高级实战案例解析:（环境部署、php封装类、Access Token获取、预上传、分片上传）
文章目录前言一.环境部署 1.封装BdPan类库 2.回调地址配置二.获取授权码Code 1.手动获取Code 2.生成本地token 3.读取AccessToken凭证 4.爬虫函数二.简化 ...
大文件分片上传前端框架_无插件实现大文件分片上传，断点续传
文件上传.gif 1. 简介: 本篇文章基于实际项目的开发,将介绍项目中关于大文件分片上传.文件验证.断点续传.手动重试上传等需求的使用场景及实现: 2. 项目需求在一个音视频的添加中,既要有音视频 ...
python分片上传_python 分片上传大格式
form-data类型 def multipart_producer(boundary, filename): """构建 multipart, 返回 yield, 实现 ...
html5 PHP 分片上传,H5分片上传含前端JS和后端处理（thinkphp）
前端处理input中的file,用slice进行切片上传,这里我使用了url传参,所有就没在formData中增加参数了.onsubbtn(){ let that = this ; var filec ...
【转载】前端上传文件，python作为后端接收并保存到本地--Tornado上传文件--分片上传文件--更换pip下载源
背景:在改造caffe自带demo时,增加了一个更新模型的功能,需要将用户训练好的caffemodel上传到服务器,并替换到已经存在的caffemodel文件,重新加载上传的caffemodel文件并 ...
PHP大文件分割上传（分片上传）
服务端为什么不能直接传大文件?跟php.ini里面的几个配置有关 upload_max_filesize = 2M //PHP最大能接受的文件大小 post_max_size = 8M //PHP能收 ...
springmvc文件分片上传
1.之前有个需求要上传一批700w词导入到线上的kafka,拼接好json后发现文件有2G多,而且线上web只支持传线文件只有30m以内,然后就写了这个分片上传. 分片上传思想:js将文件切割每10M ...

plupload插件上传总结(分片上传，php后端处理）

前端

PHP后台处理

plupload插件上传总结(分片上传，php后端处理）相关推荐

最新文章

热门文章