webuploader上传视频php,利用WebUploader实现大文件上传和视频上传

_extensions ='3gp,mp4,rmvb,mov,avi,m4v';

_mimeTypes ='video/*,audio/*,application/*';

$(function(){

var chunkSize = 500 * 1024;        //分块大小

var uniqueFileName = null;          //文件唯一标识符

var md5Mark = null;

// var _backEndUrl = '';

WebUploader.Uploader.register({

"before-send-file": "beforeSendFile"

, "before-send": "beforeSend"

, "after-send-file": "afterSendFile"

}, {

beforeSendFile: function(file){

console.log(file);

//秒传验证

var task = new $.Deferred();

var start = new Date().getTime();

(new WebUploader.Uploader()).md5File(file, 0, 10*1024*1024).progress(function(percentage){

}).then(function(val){

md5Mark = val;

_userInfo.md5 = val;

$.ajax({

type: "POST",

url: _backEndUrl,

data: {

status: "md5Check",

md5: val

},

cache: false,

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

dataType: "json"

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

if(data.ifExist){   //若存在，这返回失败给WebUploader，表明该文件不需要上传

task.reject();

uploader.skipFile(file);

file.path = data.path;

UploadComlate(file);

}else{

task.resolve();

//拿到上传文件的唯一名称，用于断点续传

uniqueFileName = md5(_userInfo.openid+_userInfo.time);

}

}, function(jqXHR, textStatus, errorThrown){    //任何形式的验证失败，都触发重新上传

task.resolve();

//拿到上传文件的唯一名称，用于断点续传

uniqueFileName = md5(_userInfo.openid+_userInfo.time);

});

});

return $.when(task);

}

, beforeSend: function(block){

//分片验证是否已传过，用于断点续传

var task = new $.Deferred();

$.ajax({

type: "POST"

, url: _backEndUrl

, data: {

status: "chunkCheck"

, name: uniqueFileName

, chunkIndex: block.chunk

, size: block.end - block.start

}

, cache: false

, timeout: 1000 //todo 超时的话，只能认为该分片未上传过

, dataType: "json"

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

if(data.ifExist){   //若存在，返回失败给WebUploader，表明该分块不需要上传

task.reject();

}else{

task.resolve();

}

}, function(jqXHR, textStatus, errorThrown){    //任何形式的验证失败，都触发重新上传

task.resolve();

});

return $.when(task);

}

, afterSendFile: function(file){

var chunksTotal = 0;

if((chunksTotal = Math.ceil(file.size/chunkSize)) > 1){

//合并请求

var task = new $.Deferred();

$.ajax({

type: "POST"

, url: _backEndUrl

, data: {

status: "chunksMerge"

, name: uniqueFileName

, chunks: chunksTotal

, ext: file.ext

, md5: md5Mark

}

, cache: false

, dataType: "json"

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

//todo 检查响应是否正常

task.resolve();

file.path = data.path;

UploadComlate(file);

}, function(jqXHR, textStatus, errorThrown){

task.reject();

});

return $.when(task);

}else{

UploadComlate(file);

}

}

});

var uploader = WebUploader.create({

swf: "./Uploader.swf",

server: _backEndUrl,     //服务器处理文件的路径

pick: "#picker",        //指定选择文件的按钮，此处放的是id

resize: false,

dnd: "#theList",        //上传文件的拖拽容器(即，如果选择用拖拽的方式选择文件进行上传，应该要把文件拖拽到的区域容器)

paste: document.body,   //[可选] [默认值：undefined]指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body

disableGlobalDnd: true, //[可选] [默认值：false]是否禁掉整个页面的拖拽功能，如果不禁用，图片拖进来的时候会默认被浏览器打开。

compress: false,

prepareNextFile: true,

chunked: true,

chunkSize: chunkSize,

chunkRetry: 2,    //[可选] [默认值：2]如果某个分片由于网络问题出错，允许自动重传多少次？

threads: true,      //[可选] [默认值：3] 上传并发数。允许同时最大上传进程数。

formData: function(){return $.extend(true, {}, _userInfo);},

fileNumLimit: 1,

fileSingleSizeLimit: 50 * 1024 * 1024,// 限制在50M

duplicate: true,

accept: {

title: '大文件上传',  //文字描述

extensions: _extensions,     //允许的文件后缀，不带点，多个用逗号分割。,jpg,png,

mimeTypes: _mimeTypes,      //多个用逗号分割。image/*,

},

});

/**

* 验证文件格式以及文件大小

*/

uploader.on("error",function (type,handler){

if (type=="Q_TYPE_DENIED"){

swal({

title:'',

text: '请上传MP4格式的视频~',

type: "warning",

confirmButtonColor: "#DD6B55",

confirmButtonText: "我知道了",

});

}else if(type=="F_EXCEED_SIZE"){

swal({

title:'',

text: '视频大小不能超过50M哦~',

type: "warning",

confirmButtonColor: "#DD6B55",

confirmButtonText: "我知道了",

});

}

});

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

$('#theList').show();

$("#theList").append('

' +

'  '+file.name+'

上传 暂停 删除' +

'

'

');

var $img = $("#" + file.id).find("img");

uploader.makeThumb(file, function(error, src){

if(error){

$img.replaceWith("视频暂不能预览");

}

$img.attr("src", src);

});

});

$("#theList").on("click", ".itemUpload", function(){

uploader.upload();

//"上传"-->"暂停"

$(this).hide();

$(".itemStop").css('display','inline-block');

$(".itemStop").show();

});

$("#theList").on("click", ".itemStop", function(){

uploader.stop(true);

//"暂停"-->"上传"

$(this).hide();

$(".itemUpload").show();

});

//todo 如果要删除的文件正在上传(包括暂停)，则需要发送给后端一个请求用来清除服务器端的缓存文件

$("#theList").on("click", ".itemDel", function(){

uploader.removeFile($('.upload_li').attr("id"));    //从上传文件列表中删除

$('.upload_li').remove();   //从上传列表dom中删除

});

uploader.on("uploadProgress", function(file, percentage){

$(".percentage").find('.js_progress').css("width",percentage * 100 + "%");

$(".percentage").find('#pers').text(parseInt(percentage * 100) + "%");

});

function UploadComlate(file){

console.log(file);

if(file && file.name){

$('#vedio').val(file.name);

$(".percentage").find('#pers').html("上传完毕");

$(".itemStop").hide();

$(".itemUpload").hide();

$(".itemDel").hide();

}else{

$(".percentage").find('#pers').html("上传失败，请您检查网络状况~");

$(".itemStop").hide();

$(".itemUpload").hide();

}

}

})