<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="提交审核"> <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>