<extend name="Public/base" /> <!-- 子导航 --> <block name="body"> <link rel="stylesheet" type="text/css" href="__CSS__/admin_table.css" media="all"> <link rel="stylesheet" type="text/css" href="__STATIC__/webuploader/webuploader.css"> <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script> <script type="text/javascript" src="__STATIC__/webuploader/webuploader.js"></script> <div class="cf main-place top_nav_list navtab_list"> {:W('Index/CateGroupTree',array('cate_id'=>I('cate_id')))} <h3 class="page_title">新增文章</h3> <p class="description_text"></p> </div> <!-- 标签页导航 --> <div class="tab-wrap"> <div class="tab_nav stabnav17112 jstabnav "> <ul> <volist name=":parse_config_attr($model['field_group'])" id="group"> <li data-tab="tab{$key}" <eq name="key" value="1">class="current"</eq>><a href="javascript:void(0);">{$group}</a></li> </volist> </ul></div> <div class="tab-content tabcon1711 tabcon17112"> <!-- 表单 --> <form id="form" action="{:U('update')}" method="post" class="form-horizontal form_info_ml"> <!-- 基础文档模型 --> <volist name=":parse_config_attr($model['field_group'])" id="group"> <div id="tab{$key}" class="tab-pane <eq name="key" value="1">in</eq> tab{$key}"> <table border="0" cellspacing="0" cellpadding="0" style="width:100%;"> <tbody> <volist name="fields[$key]" id="field"> <if condition="$field['is_show'] == 1 || $field['is_show'] == 2"> <tr class="<eq name='field.type' value='picture'>picbox<else /><eq name='field.type' value='file'>picbox</eq></eq>"> <if condition="$field['title'] eq '标题' || $field['title'] eq '文章内容' || $field['title'] eq '封面' || $field['title'] eq '封面图2' "><td class="l noticeinfo"><i class="mustmark" style="margin-left:-7px">*</i><if condition="$field['title'] eq '封面' ">封面图1<else />{$field['title']}</if></td> <else/><td class="l noticeinfo">{$field['title']}</td></if> <td class="r table_radio"> <switch name="field.type"> <case value="num"> <input type="text" class="text input-mid" name="{$field.name}" value="{$field.value}"> </case> <case value="string"> <input type="text" class="text input-large" name="{$field.name}" value="{$field.value}"> </case> <case value="textarea"> <span class="form_textarea"><textarea name="{$field.name}">{$field.value}</textarea></span> </span> </case> <case value="date"> <div class="form_input"><input type="text" name="{$field.name}" class="text date" value="" placeholder="请选择日期" /> </div> </case> <case value="datetime"> <div class="form_input"><input type="text" name="{$field.name}" class="text time" value="" placeholder="请选择时间" /> </div> </case> <case value="bool"> <div class="form_main"><span class="form_select"><select name="{$field.name}"> <volist name=":parse_field_attr($field['extra'])" id="vo"> <option value="{$key}" <eq name="field.value" value="$key">selected</eq>>{$vo}</option> </volist> </select></span></div> </case> <case value="select"> <if condition="$field.name eq game_id"> <div class="form_main"><span class="form_select"><select name="{$field.name}"> <option value="" <if condition="$data[$field['name']] eq ''"> selected="selected"</if>>选择所属游戏</option> <!-- <volist name=":get_list_data('selfbuilt')" id="vo"> <option value="{$vo.id}" >{:get_gamename($vo['gameid'])}</option> </volist> --> <volist name=":get_game_list()" id="vo"> <option value="{$vo.id}">{$vo.game_name}</option> </volist> </select></span></div> <else/> <div class="form_main"><span class="form_select"><select name="{$field.name}"> <volist name=":parse_field_attr($field['extra'])" id="vo"> <option value="{$key}" <eq name="field.value" value="$key">selected</eq>>{$vo}</option> </volist> </select></span></div> </if> </case> <case value="radio"> <span class="form_radio"> <volist name=":parse_field_attr($field['extra'])" id="vo"> <label> <input type="radio" value="{$key}" <eq name="field.value" value="$key">checked</eq> name="{$field.name}"> {$vo} </label> </volist></span> </case> <case value="checkbox"> <span class="form_checkbox"> <volist name=":parse_field_attr($field['extra'])" id="vo"> <label> <input type="checkbox" value="{$key}" name="{$field.name}[]" <eq name="field.value" value="$key">checked</eq>> {$vo} </label> </volist></span> </case> <case value="editor"> <span class="form_textarea"> <textarea name="{$field.name}">{$field.value}</textarea> {:hook('adminArticleEdit', array('name'=>$field['name'],'value'=>$field['value']))} </span> </case> <case value="picture"> <div class="form_main form_picture"> <div class="controls"> <if condition="$field['title'] eq '封面'" > <input type="hidden" name="{$field.name}" id="cover_id_{$field.name}"/> <div id="uploader-demo" > <div id="coverid"> <div class="webuploader-pick" style="line-height: 13px">上传图片</div></div> <div id="coveridList" class="uploader-list" style="display: flex;"></div> </div> <script> var uploaderImgcoverid= WebUploader.create({ // 选完文件后,是否自动上传。 auto: true, // swf文件路径 swf: '__STATIC__/webuploader/Uploader.swf', server: "{:U('File/uploadPicture',array('session_id'=>session_id(),'flag'=>true))}", // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: { id:'#coverid', multiple:true }, // dnd: false, paste: document.body, accept: { title: '图片', extensions: 'png,gif,jpg,jpeg,bmp', mimeTypes: '.png,.gif,.jpg,.jpeg,.bmp', }, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! resize: false, disableGlobalDnd: true, fileNumLimit:1, threads:5, thumb:true, compress:false, prepareNextFile: true, formData: function(){return $.extend(true, {}, userInfo);}, chunked:false, duplicate: true }); var imgcoveridListData = []; <?php if (!empty($data['facepic_data'])) :?> var html = ''; $('#coveridList').css('margin-top','10px'); <?php foreach ($data['facepic_data'] as $value) {?> <?php $value = (int)$value;?> imgcoveridListData.push(<?=$value?>); html += '<div id="' + <?=$value?> + '" class="item flooring_page_img_box" style="margin-right: 10px;">'; html += '<a href="javascript:;"><img src="<?=get_cover($value,"path")?>" style="width: 100px;height: 100px;cursor: move;"></a>'; html += '<h4 class="info" style="text-align: center;">'; html += '<a href="javascript:;" class="jsdelzip table_click" style="float:none;display:inline-block;" img-id="' + <?=$value?> + '">删除</a>'; html += '</h4>'; html += '<div class="progress progress-striped active" style="display: none;">'; html += '<div class="progress-bar" role="progressbar" style="width: 100%;">100%</div>'; html += '</div>'; html += '</div>'; <?php }?> $('#coveridList').html(html); $('#coveridList').children().children('h4').children('.jsdelzip').on('click', function() { var thisId = $(this).attr('img-id'); $(this).parent().parent().remove(); $.each(imgcoveridListData,function(index, item) { if (thisId == item) { imgcoveridListData.splice(index,1); return false; } }); setcoveridVal(); }); <?php endif ;?> // 当有文件被添加进队列的时候 var thisIndex = 0; var imgcoveridList = $("#coveridList"); uploaderImgcoverid.on( 'fileQueued', function( file ) { var html = ''; html += '<div id="' + file.id + '" class="item" style="margin-right: 10px;">'; html += '<a href="javascript:;"><img src="" style="width: 100px;height: 100px;cursor: move;"></a>'; html += '<h4 class="info">' + file.name + '</h4>'; html += '<p class="state">等待上传...</p>'; html += '</div>'; imgcoveridList.append(html); imgcoveridList.css('margin-top','10px'); var img = imgcoveridList.children('#'+file.id).find('img'); uploaderImgcoverid.makeThumb(file, function (error, src) { if (error) { return; } img.attr('src', src); }, 300, 300); }); // 文件上传过程中创建进度条实时显示。 uploaderImgcoverid.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) + '%' ); }); uploaderImgcoverid.on( 'uploadSuccess', function( file , response) { imgcoveridListData.push(Number(response.id)); console.log(imgcoveridListData) setcoveridVal(); $( '#'+file.id ).find('p.state').text('已上传').fadeOut(800); //alert(JSON.stringify(response)); $('#'+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() { uploaderImgcoverid.removeFile( file.id ); $('#'+file.id).remove(); $.each(imgcoveridListData,function(index, item) { if (response.id == item) { imgcoveridListData.splice(index,1); return false; } }); setcoveridVal(); console.log(imgcoveridListData); return false; }); }); uploaderImgcoverid.on('uploadError', function(file) { $( '#'+file.id ).find('p.state').text('上传出错'); }); uploaderImgcoverid.on( 'uploadComplete', function(file) { $( '#'+file.id ).find('.progress').fadeOut(); }); function setcoveridVal() { var coverid = ''; $.each(imgcoveridListData,function(index, item) { coverid += item + ','; }); coverid = coverid.substring(0, coverid.length - 1); $("input[name=cover_id]").val(coverid); } </script> <elseif condition="$field['title'] eq '封面图2'" /> <input type="hidden" name="{$field.name}" id="cover_id_{$field.name}"/> <div id="uploader-demo" > <div id="coverid2"> <div class="webuploader-pick" style="line-height: 13px">上传图片</div></div> <div id="coverid2List" class="uploader-list" style="display: flex;"></div> </div> <script> var uploaderImgcoverid2= WebUploader.create({ // 选完文件后,是否自动上传。 auto: true, // swf文件路径 swf: '__STATIC__/webuploader/Uploader.swf', server: "{:U('File/uploadPicture',array('session_id'=>session_id(),'flag'=>true))}", // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: { id:'#coverid2', multiple:true }, // dnd: false, paste: document.body, accept: { title: '图片', extensions: 'png,gif,jpg,jpeg,bmp', mimeTypes: '.png,.gif,.jpg,.jpeg,.bmp', }, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! resize: false, disableGlobalDnd: true, fileNumLimit:1, threads:5, thumb:true, compress:false, prepareNextFile: true, formData: function(){return $.extend(true, {}, userInfo);}, chunked:false, duplicate: true }); var imgcoverid2ListData = []; <?php if (!empty($data['facepic2_data'])) :?> var html = ''; $('#coverid2List').css('margin-top','10px'); <?php foreach ($data['facepic2_data'] as $value) {?> <?php $value = (int)$value;?> imgcoverid2ListData.push(<?=$value?>); html += '<div id="' + <?=$value?> + '" class="item flooring_page_img_box" style="margin-right: 10px;">'; html += '<a href="javascript:;"><img src="<?=get_cover($value,"path")?>" style="width: 100px;height: 100px;cursor: move;"></a>'; html += '<h4 class="info" style="text-align: center;">'; html += '<a href="javascript:;" class="jsdelzip table_click" style="float:none;display:inline-block;" img-id="' + <?=$value?> + '">删除</a>'; html += '</h4>'; html += '<div class="progress progress-striped active" style="display: none;">'; html += '<div class="progress-bar" role="progressbar" style="width: 100%;">100%</div>'; html += '</div>'; html += '</div>'; <?php }?> $('#coverid2List').html(html); $('#coverid2List').children().children('h4').children('.jsdelzip').on('click', function() { var thisId = $(this).attr('img-id'); $(this).parent().parent().remove(); $.each(imgcoverid2ListData,function(index, item) { if (thisId == item) { imgcoverid2ListData.splice(index,1); return false; } }); setcoverid2Val(); }); <?php endif ;?> // 当有文件被添加进队列的时候 var thisIndex = 0; var imgcoverid2List = $("#coverid2List"); uploaderImgcoverid2.on( 'fileQueued', function( file ) { var html = ''; html += '<div id="' + file.id + '" class="item" style="margin-right: 10px;">'; html += '<a href="javascript:;"><img src="" style="width: 100px;height: 100px;cursor: move;"></a>'; html += '<h4 class="info">' + file.name + '</h4>'; html += '<p class="state">等待上传...</p>'; html += '</div>'; imgcoverid2List.append(html); imgcoverid2List.css('margin-top','10px'); var img = imgcoverid2List.children('#'+file.id).find('img'); uploaderImgcoverid2.makeThumb(file, function (error, src) { if (error) { return; } img.attr('src', src); }, 300, 300); }); // 文件上传过程中创建进度条实时显示。 uploaderImgcoverid2.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) + '%' ); }); uploaderImgcoverid2.on( 'uploadSuccess', function( file , response) { imgcoverid2ListData.push(Number(response.id)); console.log(imgcoverid2ListData) setcoverid2Val(); $( '#'+file.id ).find('p.state').text('已上传').fadeOut(800); //alert(JSON.stringify(response)); $('#'+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() { uploaderImgcoverid2.removeFile( file.id ); $('#'+file.id).remove(); $.each(imgcoverid2ListData,function(index, item) { if (response.id == item) { imgcoverid2ListData.splice(index,1); return false; } }); setcoverid2Val(); console.log(imgcoverid2ListData); return false; }); }); uploaderImgcoverid2.on('uploadError', function(file) { $( '#'+file.id ).find('p.state').text('上传出错'); }); uploaderImgcoverid2.on( 'uploadComplete', function(file) { $( '#'+file.id ).find('.progress').fadeOut(); }); function setcoverid2Val() { var coverid2 = ''; $.each(imgcoverid2ListData,function(index, item) { coverid2 += item + ','; }); coverid2 = coverid2.substring(0, coverid2.length - 1); $("input[name=cover_id2]").val(coverid2); } </script> </if> </div> </case> <case value="file"> <div class="form_main form_file"> <div class="controls"> <input type="file" id="upload_file_{$field.name}"> <input type="hidden" name="{$field.name}" value="{$data[$field['name']]}"/> <div class="upload-img-box"> <present name="data[$field['name']]"> <div class="upload-pre-file"><span class="upload_icon_all"></span>{$data[$field['name']]}</div> </present> </div> </div> <script type="text/javascript"> //上传图片 /* 初始化上传插件 */ $("#upload_file_{$field.name}").uploadify({ "height" : 30, "swf" : "__STATIC__/uploadify/uploadify.swf", "fileObjName" : "download", "buttonText" : "上传附件", "uploader" : "{:U('File/upload',array('session_id'=>session_id(),'flag'=>true))}", "width" : 120, 'removeTimeout' : 1, "onUploadSuccess" : uploadFile{$field.name}, 'onFallback' : function() { alert('未检测到兼容版本的Flash.'); } }); function uploadFile{$field.name}(file, data){ var data = $.parseJSON(data); if(data.status){ var name = "{$field.name}"; $("input[name="+name+"]").val(data.data); $("input[name="+name+"]").parent().find('.upload-img-box').html( "<div class=\"upload-pre-file\"><span class=\"upload_icon_all\"></span>" + data.info + "</div>" ); } else { updateAlert(data.info); setTimeout(function(){ $('#top-alert').find('button').click(); $(that).removeClass('disabled').prop('disabled',false); },1500); } } </script> </div> </case> <default/> <input type="text" class="text input-large" name="{$field.name}" value="{$field.value}"> </switch> <span class="notice-text"><notempty name="field['remark']">({$field['remark']})</notempty></span> </td> </tr> </if> </volist> </tbody> </table> </div> </volist> <div class="form-item cf"> <button class=" submit_btn ajax-post mlspacing" id="submit" type="submit" target-form="form-horizontal">确 定</button> <a class="submit_btn" href="{:U('article/index?cate_id='.$cate_id)}">返 回</a> <if condition="C('OPEN_DRAFTBOX') and (ACTION_NAME eq 'add' or $info['status'] eq 3)"> <button class=" submit_btn" url="{:U('article/autoSave')}" target-form="form-horizontal" id="autoSave"> 存草稿 </button> </if> <input type="hidden" name="id" value="{$info.id|default=''}"/> <input type="hidden" name="pid" value="{$info.pid|default=''}"/> <input type="hidden" name="model_id" value="{$info.model_id|default=''}"/> <input type="hidden" name="group_id" value="{$info.group_id|default=''}"/> <input type="hidden" name="category_id" value="{$info.category_id|default=''}"> </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="{$Think.const.M_TITLE}"> <input type="hidden" name="url" value="{$Think.const.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='Think.const.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"> highlight_subnav('{:get_highlight_subnav($_GET["cate_id"],"Article/index","cate_id")}'); $('#submit').click(function(){ $('#form').submit(); }); $(function(){ $('.date').datetimepicker({ format: 'yyyy-mm-dd', language:"zh-CN", minView:2, autoclose:true }); $('.time').datetimepicker({ language:"zh-CN", hour: 13, minute: 15 }); showTab(); <if condition="C('OPEN_DRAFTBOX') and (ACTION_NAME eq 'add' or $info['status'] eq 3)"> //保存草稿 var interval; $('#autoSave').click(function(){ var target_form = $(this).attr('target-form'); var target = $(this).attr('url') var form = $('.'+target_form); var query = form.serialize(); var that = this; $(that).addClass('disabled').attr('autocomplete','off').prop('disabled',true); $.post(target,query).success(function(data){ if (data.status==1) { updateAlert(data.info ,'alert-success'); $('input[name=id]').val(data.data.id); }else{ updateAlert(data.info); } setTimeout(function(){ $('#tip').find('.tipclose').click(); $('#top-alert').find('button').click(); $(that).removeClass('disabled').prop('disabled',false); },1500); }) //重新开始定时器 clearInterval(interval); autoSaveDraft(); return false; }); //Ctrl+S保存草稿 $('body').keydown(function(e){ if(e.ctrlKey && e.which == 83){ $('#autoSave').click(); return false; } }); //每隔一段时间保存草稿 function autoSaveDraft(){ interval = setInterval(function(){ //只有基础信息填写了,才会触发 var title = $('input[name=title]').val(); var name = $('input[name=name]').val(); var des = $('textarea[name=description]').val(); if(title != '' || name != '' || des != ''){ $('#autoSave').click(); } }, 1000*parseInt({:C('DRAFT_AOTOSAVE_INTERVAL')})); } autoSaveDraft(); </if> }); </script> <script> 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){ //秒传验证 if (file['source']['ext'] === 'zip' || file['source']['ext'] === 'rar') { 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){ //分片验证是否已传过,用于断点续传 if (block['file']['source']['ext'] === 'zip' || block['file']['source']['ext'] === 'rar') { 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){ if (file['source']['ext'] === 'zip' || file['source']['ext'] === 'rar') { 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); } } } }); </script> </block>