海豚php 上传图片,自定义分片上传字段

有用户说要断点续传，然后自己没研究过，但是发现webupload里支持分片上传的，就研究实现了下，本来试了一个stream js 但是在海豚里各种ui没调通。

还有官方手册，终于把他搞出来了。

思路，第一自己扩展sendFile 事件第二，改变分片上传参数，包括上传地址

第三 实现分片上传的方法。

WebUploader.Uploader.register({

"name": "cutfile_uploader",

"before-send": "beforeSend" // 整个文件上传前

}, {

beforeSend:function(block){

var deferred = WebUploader.Deferred();

if(is_upload)//跳过到开始上传的哪一个分片时

{

deferred.resolve();

}else if(totalFiles) {

//已经获取过文件数量则直接判断是否跳过

//当前分片下标小于等于目录下的文件数量就认为分块存在,因为分块上传下标是由小到大

// console.log(block.chunk);

// console.log(totalFiles);

// console.log(!totalFiles.in_array(block.chunk));

if (!totalFiles.in_array(block.chunk - 1)) {

deferred.resolve();

} else {

//分块存在，跳过

deferred.reject();

}

} else {

$.post(cutfile_conf.check_upload_url, {md5: fileMd5}, function (data) {

console.log(data);

if (data.code) {

totalFiles = data.data;

//当前分片下标小于等于目录下的文件数量就认为分块存在,因为分块上传下标是由小到大

if (!data.data.in_array(block.chunk-1)) {

deferred.resolve();

} else {

//分块存在，跳过

deferred.reject();

}

} else {

is_upload = true;

deferred.resolve();

}

}, 'json');

}

}

});注册send-file事件

// 当有文件添加进来的时候

uploader.on( 'fileQueued', function( file ) {

console.log(new Date());

// 设置当前上传对象

curr_uploader = uploader;

uploader.md5File( file )

// 完成

.then(function(val) {

fileMd5 = val;

var formData = uploader.option('formData');

// console.log('md5 result:', val);

formData.md5 = fileMd5;

// console.log(formData);

uploader.option('formData',formData);

// console.log(uploader.option('formData'));

});

var $li = '

' +

' 正在读取文件信息...' +

' ' +

file.name +

' [下载] [删除]' +

'

'

';

if ($multiple) {

$file_list.append($li);

} else {

$file_list.html($li);

// 清空原来的数据

$input_file.val('');

}

});修改file-queueshi事件，主要是每次上传时不光传file 对象还将原始md5传过去用于组成分片的文件用，方便最终检测是否存在已传过的分片。这里面有一个大坑，curr_uploader = uploader; 这个设置的在form.js里WebUploader.Uploader.register({

"before-send-file": "beforeSendFile" // 整个文件上传前

}, {

beforeSendFile:function(file){

var $li = $( '#'+file.id );

var deferred = WebUploader.Deferred();

var owner = this.owner;

owner.md5File(file).then(function(val){

$.ajax({

type: "POST",

url: dolphin.upload_check_url,

data: {

md5: val

},

cache: false,

timeout: 10000, // 超时的话，只能认为该文件不曾上传过

dataType: "json"

}).then(function(res, textStatus, jqXHR){

if(res.code){

// 已上传，触发上传完成事件，实现秒传

deferred.reject();

curr_uploader.trigger('uploadSuccess', file, res);

curr_uploader.trigger('uploadComplete', file);

}else{

// 文件不存在，触发上传

deferred.resolve();

$li.find('.file-state').html('正在上传...');

$li.find('.img-state').html('

正在上传...

');

$li.find('.progress').show();

}

}, function(jqXHR, textStatus, errorThrown){

// 任何形式的验证失败，都触发重新上传

deferred.resolve();

$li.find('.file-state').html('正在上传...');

$li.find('.img-state').html('

正在上传...

');

$li.find('.progress').show();

});

});

return deferred.promise();

}

});里面的 妙传实现时 出发已有的webload uploadSuccess 会报为定义的方法，必须修改 form.js将var curr_uploader = {}; 这个定义提到$(function(){ 外，变为全局变量。前端我也不太懂，总之官方的实现 不管表单里有没有webupload 都跑去注册了一下事件，然后才加载init.js 自定义表单项的js 并且我试了用官方的 unregistered webupload 都无效。官方要考虑一下扩展性，或者官方支持分片最好。对应的上传和检测 方法我已经更改了admin里的ajax 实现了。

所以官方的自定义字段的后端实现 也不知道如何去扩展一个控制器方法。

大家把我的附件解压放到项目里，只支持1.1.0 以上。 然后修改一行form.js  就可以了。

参考页面：

public function index(){

return ZBuilder::make('form')

->setPageTitle('分片上传')

->addCutfile('file', '上传')

->fetch();

}有个疑惑，看了很多文章，chunk 发现upload都是1开始 而webupload里是从0开始的。

还有感觉获取本地信息检查妙传总感觉卡，还有断电续传的进度 不想现象的 自动晚上长，但是请求数确实会比重新传的分片数要少。希望官方参考本文章增加一个分片上传的字段体验完整的功能