<extend name="Public/base" /> <block name="css"> <link rel="stylesheet" type="text/css" href="__CSS__/admin_table.css" media="all"> <link rel="stylesheet" type="text/css" href="__STATIC__/webuploader/webuploader.css" media="all"> </block> <block name="body"> <link rel="stylesheet" type="text/css" href="__CSS__/admin_table.css" media="all"> <script type="text/javascript" src="__STATIC__/layer/layer.js"></script> <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script> <script src="__STATIC__/md5.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="__STATIC__/webuploader/webuploader.js"></script> <link rel="stylesheet" href="__CSS__/select2.min.css" type="text/css" /> <style> .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:35px; line-height:28px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height:26px; } .select2-container--default .select2-search--dropdown .select2-search__field { height:26px;line-height:26px;font-size:12px; } .select2-results__option[aria-selected] {font-size:12px;} .tabcon1711 .select2-container--default .select2-selection--single{ font-size: 12px; color: #555; vertical-align: middle; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #fff; border: 1px solid #ccc; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -webkit-transition: border linear .2s, box-shadow linear .2s; -moz-transition: border linear .2s, box-shadow linear .2s; -o-transition: border linear .2s, box-shadow linear .2s; transition: border linear .2s, box-shadow linear .2s;height:30px;} .tabcon1711 .select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 30px;} .tabcon1711 .select2-container--default .select2-selection--single .select2-selection__arrow {height:30px;} .tabcon1711 .select2-container--default .select2-search--dropdown .select2-search__field { height:26px;line-height:26px;font-size:12px; } .tabcon1711 .select2-results__option[aria-selected] {font-size:12px;} </style> <div class="cf main-place top_nav_list navtab_list"> <h3 class="page_title">{$meta_title}</h3> <p class="description_text"></p> </div> <!-- 标签页导航 --> <div class="tab-wrap"> <div class="tab-content tabcon1711"> <!-- 表单 --> <form id="form" action="{:U('add?model='.$model['id'])}" method="post" class="form-horizontal"> <!-- 基础文档模型 --> <div id="tab1" class="tab-pane in tab1"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="l"><i class="mustmark" style="margin-left:-7px">*</i>标题:</td> <td class="r" > <input type="text" class="txt" name="title" value="" placeholder="输入标题"> </td> </tr> <tr> <td class="l">开始时间:</td> <td class="r table_time"> <input type="text" class="txtt time" name="start_time" value="" placeholder=" 不填默认无时间限制"> </td> </tr> <tr> <td class="l">结束时间:</td> <td class="r table_time"> <input type="text" class="txtt time" name="end_time" value="" placeholder=" 不填默认无时间限制"> </td> </tr> <tr> <td class="l">排序:</td> <td class="r tow_table" > <span class="form_radio table_btn"> <input type="text" class="txt" name="sort" value="0" placeholder="输入排序"> </span> <span class="notice-text">不填默认为0,数值越大越靠前</span> </td> </tr> <tr> <td class="l"><i class="mustmark" style="margin-left:-7px">*</i>奖励积分:</td> <td class="r tow_table" > <span class="form_radio table_btn"> <input type="text" class="txt" name="reward" value="1" placeholder="输入奖励积分"> </span> <span class="notice-text">用户观看后可获得的积分奖励,最少为1</span> </td> </tr> <tr> <td class="l">展示时间:</td> <td class="r tow_table" > <span class="form_radio table_btn"> <input type="text" class="txt" name="show" value="0" placeholder="输入展示时间">秒 </span> <span class="notice-text">广告播放时间,最长时间限制为10秒</span> </td> </tr> <tr> <td class="l noticeinfo">打开方式</td> <td class="r table_radio"> <span class="form_radio table_btn"> <label> <input type="radio" class="inp_radio" value="1" name="way" checked="checked"> 横屏 </label> <label> <input type="radio" class="inp_radio" value="2" name="way" > 竖屏 </label> </span> </td> </tr> <tr class="picbox2"> <td class="l noticeinfo" ><i class="mustmark" style="margin-left:-7px">*</i>封面图</td> <td class="r tow_table"> <span class="table_btn table_upload"> <input type="file" id="upload_picture_cover"> <input type="hidden" name="cover" id="cover_id_cover" value="" /> <div class="upload-img-box"> </div> </span> <span class="notice-text">图片大小为2M以内,图片分辨率:842*561PX,支持PNG、JPG、JPEG格式</span> </td> </tr> <tr class="picbox2"> <td class="l noticeinfo">素材</td> <td class="r tow_table"> <span class="table_btn table_upload"> <div id="uploader" class="wu-example"> <div class="btns"> <div id="picker" style="height:30px;">上传素材</div> </div> <!--用来存放文件信息--> <div id="thelist" class="uploader-list"> </div> </div> <input type="hidden" id="file_url" name="material_url" value="{$data['material_url']}"/> </span> <span class="notice-text">若广告为视频或gif动图需进行素材上传,视频大小为5M以内,支持MP4格式,只能上传单个素材,未上传则显示封面图</span> </td> </tr> </tbody> </table> </div> <div class="form-item cf"> <button class="submit_btn ajax-post " id="submit" type="submit" target-form="form-horizontal"> 保存 </button> <a class="submit_btn " alt="返回上一页" title="返回上一页" href="javascript:window.history.back();" > 返回 </a> </div> </form> </div> </div> <div class="common_settings"> <span class="plus_icon"><span><img src="__IMG__/zwmimages/icon_jia.png"></span></span> <form class="addShortcutIcon"> <input type="hidden" name="title" value="{$m_title}"> <input type="hidden" name="url" value="{$m_url}"> </form> <a class="ajax-post add-butn <notempty name='commonset'>addSIsetted</notempty>" href="javascript:;" target-form="addShortcutIcon" url="{:U('Think/addShortcutIcon')}"><img src="__IMG__/zwmimages/icon_jia.png"><span><notempty name='commonset'>已添加<else />添加至常用设置</notempty></span></a> </div> </block> <block name="script"> <link href="__STATIC__/datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css"> <php>if(C('COLOR_STYLE')=='blue_color') echo '<link href="__STATIC__/datetimepicker/css/datetimepicker_blue.css" rel="stylesheet" type="text/css">';</php> <link href="__STATIC__/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script> <script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script> <script type="text/javascript" src="__JS__/select2.min.js"></script> <script type="text/javascript"> //导航高亮 highlight_subnav('{:U('Boon/lists')}'); $('#submit').click(function(){ $('#form').submit(); }); $(function(){ $('.date').datetimepicker({ format: 'yyyy-mm-dd HH:ii', language:"zh-CN", minView:0, autoclose:true }); $('.time').datetimepicker({ format: 'yyyy-mm-dd HH:ii', language:"zh-CN", minView:0, autoclose:true }); showTab(); }); $("#upload_picture_cover").uploadify({ "height" : 30, "swf" : "__STATIC__/uploadify/uploadify.swf", "fileObjName" : "download", "buttonText" : "上传封面", "uploader" : "{:U('File/uploadPicture',array('session_id'=>session_id(),'flag'=>true))}", "width" : 120, 'removeTimeout' : 1, 'fileTypeExts' : '*.jpg; *.jpeg; *.png; *.gif;', "onUploadSuccess" : upload_picture_cover, 'onFallback' : function() { alert('未检测到兼容版本的Flash.'); } }); function upload_picture_cover(file, data){ var data = $.parseJSON(data); var src = ''; if(data.status){ $("#cover_id_cover").val(data.id); src = data.url || '__ROOT__' + data.path; $("#cover_id_cover").parent().find('.upload-img-box').html( '<div class="upload-pre-item"><span class="placeholder-graphic placeholder-graphic_ad"><img src="' + src + '"/></span></div>' ); } else { updateAlert(data.info,'tip_error'); setTimeout(function(){ $('#top-alert').find('button').click(); $(that).removeClass('disabled').prop('disabled',false); },1500); } } 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+'/'+data.name); $("#file_size").val(file.size); }, function(jqXHR, textStatus, errorThrown){ task.reject(); }); return $.when(task); }else{ //UploadComlate(file); } } }); var uploader = WebUploader.create({ // 选完文件后,是否自动上传。 auto: true, // swf文件路径 swf: '__STATIC__/webuploader/Uploader.swf', // 文件接收服务端。 server: backEndUrl, // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: {id:'#picker'}, //dnd: "#theList", paste: document.body, accept: { title: '压缩包', extensions: 'gif,mp4', mimeTypes: '*', }, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! resize: false, disableGlobalDnd: true, fileNumLimit:1, threads:3, compress: false, prepareNextFile: true, formData: function(){return $.extend(true, {}, userInfo);}, duplicate:true, chunked:true, chunkSize: 5*1000*1024, duplicate: true }); uploader.on('beforeFileQueued',function(file){ var mycars=new Array("gif","mp4"); if($.inArray(file.ext,mycars) == -1){ updateAlert('上传文件非法','tip_error'); setTimeout(function(){ $('#tip').find('.tipclose').click(); },1500); return false; } //$.each(mycars,function(index,value){}); }) // 当有文件被添加进队列的时候 uploader.on( 'fileQueued', function( file ) { $("#thelist").append( '<div id="' + file.id + '" class="item">' + '<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) + '%' ); }); $('.jsdelzip').click(function() { $("#file_url").val(''); $('#beforeupload').remove(); return false; }); uploader.on( 'uploadSuccess', function( file , response) { $( '#'+file.id ).find('p.state').text('已上传').fadeOut(800); $('#'+file.id).find('h4.info').append('<a href="javascript:;" class="jsdelzip table_click" style="float:none;display:inline-block;margin-left:10px;">删除</a>'); $('#'+file.id).find('.jsdelzip').on('click',function() { $("#file_url").val(''); uploader.removeFile( file.id ); $('#'+file.id).remove(); return false; }); if(!response.chunk){ var url = response.path + "/" +response.name; $("#file_url").val(url); } }); uploader.on( 'uploadError', function( file ) { $( '#'+file.id ).find('p.state').text('上传出错'); }); uploader.on( 'uploadComplete', function(file) { $( '#'+file.id ).find('.progress').fadeOut(); }); </script> </block>