You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

313 lines
15 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<extend name="Public/manage" />
<block name="head">
<script type="text/javascript" src="__STATIC__/webuploader/webuploader.js"></script>
<link rel="stylesheet" type="text/css" href="__STATIC__/webuploader/webuploader.css" media="all">
<script src="__STATIC__/md5.js" type="text/javascript" charset="utf-8"></script>
</block>
<block name="body" >
<div class="matter_right_content">
<form id="addServer" action="" method="post" class="form-horizontal" enctype="multipart/form-data" novalidate="novalidate">
<div class="title create_title create_server_title">
<h3>游戏素材 </h3>
</div>
<div class="form-group clearfix">
<label class="mrc_left mrc control-label"><span class="must_red">*</span> 游戏名称</label>
<div class="mrc_right4_3_3 mrc input-format matter_border">
<input type="text" class="form-control" placeholder="不超过10个字" value="{$data.game_name}" readonly disabled>
</div>
<div class="clearfix"></div>
<div class="mrc_colum_ml mrc_colum4_1_6 mrc input-status"></div>
</div>
<div class="form-group clearfix">
<label class="mrc_left mrc control-label"><font color="red">*</font> 上传素材包</label>
<div class="mrc_colum2_5 mrc input-format">
<div id="picker" style="line-height:35px;">上传素材包</div>
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list">
</div>
<input type="hidden" id="file_url" name="file_url" value="{$data.material_url}"/>
<input type="hidden" id="file_name" value=""/>
</div>
<div class="mrc_right4_3_3 mrc">
<label class="col-lg-11 control-label matter_notice" style="font-weight: normal;">请上传zip格式或rar格式文件</label>
</div>
<div class="clearfix"></div>
<div class="mrc_colum_ml mrc_colum4_1_6 mrc input-status"></div>
</div>
<div class="form-group clearfix">
<label class="mrc_left mrc control-label"></label>
<div class="mrc_colum4_1_6 mrc">
<input type="submit" class="btn btn_primary user_btn" id="editServer" value="提交审核">&nbsp;&nbsp;&nbsp;<a href="javascript:history.go(-1);" class="btn btn_default user_btn_default">取消</a>
</div>
</div>
</form>
</div>
<script>
function delFile(){
layer.confirm('您确定要删除素材包吗?', {
btn: ['确定','取消'] //按钮
}, function(){
location.reload();
}, function(){
});
}
$(function() {
$.validator.addMethod("checkFileType", function(value, element,params){
var type = value;
var flag = false;
for (var i=0;i<params.length;i++) {
if (type.indexOf(params[i])>-1) {
flag = true;break;
}
}
return flag;
}, "上传文件类型错误");
$("#addServer").validate({
ignore:"",
rules:{
game_name: {
required: true,
},
file_url: {
required: true,
checkFileType: ['zip','rar'],
}
},
messages:{
game_name: {
required: "请选择游戏",
},
file_url: {
required: "请上传游戏素材包",
checkFileType: "上传文件类型必须是.zip 或 .rar",
}
},
submitHandler: function (form) {
$(form).ajaxSubmit({
success:function(result){
if(result.status == 1){
layer.msg(result.info,{time:1500},function(){
location.href = "{:U('Game/index')}";
});
}else{
layer.msg(result.info);
}
},error:function(a,b,c){layer.msg("服务器异常");}
});
}
});
var userInfo = {userId:"kazaff", md5:""}; //用户会话信息
var chunkSize = 5000 * 1024; //分块大小
var uniqueFileName = null; //文件唯一标识符
var md5Mark = null;
var backEndUrl = "{:U('File/shard_upload',array('type'=>1,'session_id'=>session_id()))}";
WebUploader.Uploader.register({
"before-send-file" : "beforeSendFile",
"before-send" : "beforeSend",
"after-send-file" : "afterSendFile"
}, {
beforeSendFile: function(file){
//秒传验证
var task = new $.Deferred();
var start = new Date().getTime();
(new WebUploader.Uploader()).md5File(file, 0, 10*1024*1024).progress(function(percentage){
//console.log(percentage);
}).then(function(val){
//console.log("总耗时: "+((new Date().getTime()) - start)/1000);
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){
alert(data.chunk);
//console.log(data);
if(data.ifExist){ //若存在这返回失败给WebUploader表明该文件不需要上传
task.reject();
uploader.skipFile(file);
file.path = data.path;
}else{
task.resolve();
//拿到上传文件的唯一名称,用于断点续传
uniqueFileName = md5(''+userInfo.userId+file.name+file.type+file.lastModifiedDate+file.size);
}
}, function(jqXHR, textStatus, errorThrown){ //任何形式的验证失败,都触发重新上传
task.resolve();
//拿到上传文件的唯一名称,用于断点续传
uniqueFileName = md5(''+userInfo.userId+file.name+file.type+file.lastModifiedDate+file.size);
});
});
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;
$("#file_name").val(data.name);
$("#file_url").val(data.path);
$("#file_size").val(file.size);
}, function(jqXHR, textStatus, errorThrown){
task.reject();
});
return $.when(task);
}else{
}
}
});
var uploader = WebUploader.create({
// 选完文件后,是否自动上传。
auto: true,
// swf文件路径
swf: '__STATIC__/webuploader/Uploader.swf',
// 文件接收服务端。
server: backEndUrl,
// 选择文件的按钮。可选。
// 内部根据当前运行是创建可能是input元素也可能是flash.
pick: {id:'#picker'},
//dnd: "#theList",
paste: document.body,
// 不压缩image, 默认如果是jpeg文件上传前会压缩一把再上传
resize: false,
disableGlobalDnd: true,
fileNumLimit:1,
threads:3,
compress: false,
prepareNextFile: true,
formData: function(){return $.extend(true, {}, userInfo);},
accept:{
title: 'zip',
extensions: 'zip,rar',
mimeTypes: '.zip,.rar'
},
duplicate:true,
chunked:true,
chunkSize: 5*1000*1024,
duplicate: true
});
uploader.on('beforeFileQueued', function(file) {
if($('#thelist').find('.item.jsupitem').length>0) {
layer.msg('素材包已存在,请删除后重新上传');
}
});
// 当有文件被添加进队列的时候
uploader.on( 'fileQueued', function( file ) {
$("#thelist").append( '<div id="' + file.id + '" class="item jsupitem">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>' );
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo( $li ).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css( 'width', percentage * 100 + '%' );
$percent.text( (percentage * 100).toFixed(0) + '%' );
});
uploader.on( 'uploadSuccess', function( file , response) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
$li.siblings().remove();
var url=window.location.host+response.path+"/"+response.name;
$li.find('h4.info').html("<table><tr><td><a class='showfile' href='http://"+url+"'>"+response.name+"</a></td>"+"<td><a href='javascript:;' onclick='delFile("+file.id+");'><img src='__IMG__/remove.gif'></a></td></tr></table>");
$li.find('p.state').text('');
if(!response.chunk){
$("#file_url").val(response.path);
$("#file_name").val(response.name);
}
});
uploader.on( 'uploadError', function( file ) {
$( '#'+file.id ).find('p.state').text('上传出错');
});
uploader.on( 'uploadComplete', function(file) {
$( '#'+file.id ).find('.progress').fadeOut();
var file_name = $.trim($('#file_name').val());
var file_url = $.trim($('#file_url').val());
if(file_name && file_url) {
$('#file_url').val(file_url+'/'+file_name);
var url=window.location.host+file_url.replace('./','/')+'/'+file_name;
$( '#'+file.id ).find('.showfile').attr('href',url).text(file.name);
}
$('#file_url').valid();
});
});
$.VMenu.show('#menu');
$.VMenu.open('m2.1');
</script>
</block>