zoukankan      html  css  js  c++  java
  • onethink多图上传

    模板处理, 可以参考 checkbox 的。
    注:edit 方法的 基本一样,需要先把已有的数据展示出来,绑定双击事件,删除图片 需要先绑定给已经展示出来的图片, uploadPicture 的callback 中只绑定给了新上传的图片
    ApplicationAdminCommon/function.php
    
    function get_attribute_type 中
    
    给$_type 添加一个元素
    'pictures' => array('多图上传','TEXT NOT NULL'),
    
    打开 Application/Admin/View/Think/add.html
    找到 switch 标签
    
    把 <case value="picture"> …… </case> 这段复制一份, 把 <case value="picture"> 改为 <case value="pictures">
    
    删除 
    <case value="pictures"> 里边的 
    <input type="hidden" name="{$field.name}" id="cover_id_{$field.name}"/>
    
    修改 
    function uploadPicture{$field.name}(file, data){
    var data = $.parseJSON(data);
    var src = '';
    var id=0; //新加的
    if(data.status){
    id = data.id;
    $("#cover_id_{$field.name}").val(data.id);
    src = data.url || '__ROOT__' + data.path;
    //向原来的图片展示框中追加图片input 追加图片 ID
    
    $("#upload_picture_{$field.name}").parent().find('.upload-img-box').append(
    '<div class="upload-pre-item" id="cover_picture_{$field.name}'+id+'"><img src="' + src + '" />'+
    '<input type="hidden" name="{$field.name}[]" value="'+id+'" id="cover_id_{$field.name}'+id+'"/></div>'
    );
    // 绑定双击事件,删除图片,你也可以点击图片预览大图, 并写上删除图片方法,//你可以用ajax 从数据库中删除图片,
    $("#cover_picture_{$field.name}"+id).on('dblclick',function(s){
    $(this).remove();
    $('#cover_id_{$field.name}'+id).remove();
    
    })
    } else {
    updateAlert(data.info);
    setTimeout(function(){
    $('#top-alert').find('button').click();
    $(that).removeClass('disabled').prop('disabled',false);
    },1500);
    }
    }
    
    数据处理, 可以参考 checkbox 的。
    方法一;
    ApplicationAdminController/ThinkController.class.php
    
    protected function checkAttr 中 添加如下 (把提交过来的array 转为 string 以便存入数据库)
    
    }elseif('pictures'==$attr['type']){ // 多选型
    $auto[] = array($attr['name'],'arr2str',3,'function'); //arr2str 、 serialize 、json_encode 都可以
    
    或者在
    模型管理-》字段管理-》 把对应的字段 的自动完成规则 设置 为 arr2str 、 serialize 、json_encode 都可以
    
    
    
    
    编辑
    <case value="pictures">
    <div class="controls">
    <input type="file" id="upload_picture_{$field.name}">
    
    
    
    <div class="upload-img-box">
    <notempty name="data[$field['name']]">
    
    <volist name=":parse_field_attr($data[$field['name']])" id="vo">
    <div class="upload-pre-item upload-pre-item{$field.name}" id="cover_picture_{$vo}"><img src="{$data[$field['name']]|get_cover='path'}"/>
    <input type="hidden" name="{$field.name}[]" id="cover_id_{$vo}" value="{$vo}"/>
    </div>
    
    </volist>
    </notempty>
    </div>
    </div>
    <script type="text/javascript">
    //上传图片
    /* 初始化上传插件 */
    $("#upload_picture_{$field.name}").uploadify({
    "height" : 30,
    "swf" : "__STATIC__/uploadify/uploadify.swf",
    "fileObjName" : "download",
    "buttonText" : "上传图片",
    "uploader" : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
    "width" : 120,
    'removeTimeout'    : 1,
    'fileTypeExts'    : '*.jpg; *.png; *.gif;',
    "onUploadSuccess" : uploadPicture{$field.name},
    'onFallback' : function() {
    alert('未检测到兼容版本的Flash.');
    }
    });
    function uploadPicture{$field.name}(file, data){
    var data = $.parseJSON(data);
    var src = '';
    var id=0;
    if(data.status){
    id = data.id;
    $("#cover_id_{$field.name}").val(data.id);
    src = data.url || '__ROOT__' + data.path;
    $("#upload_picture_{$field.name}").parent().find('.upload-img-box').append(
    '<div class="upload-pre-item" id="cover_picture_{$field.name}'+id+'"><img src="' + src + '" />'+
    '<input type="hidden" name="{$field.name}[]" value="'+id+'" id="cover_id_{$field.name}'+id+'"/></div>'
    );
    
    $("#cover_picture_{$field.name}"+id).on('dblclick',function(s){
    $(this).remove();
    })
    } else {
    updateAlert(data.info);
    setTimeout(function(){
    $('#top-alert').find('button').click();
    $(that).removeClass('disabled').prop('disabled',false);
    },1500);
    }
    }
    $(".upload-pre-item{$field.name}").on('dblclick',function(s){
    $(this).remove();
    })
    </script>
    </case>
  • 相关阅读:
    校验规则,纯数字。几位有效数字,保留几位小数
    银行卡校验规则(Luhn算法)
    forEach兼容ie8
    node.js
    gulp
    observer
    webpack.config.js 配置
    内存泄漏(Memory Leak)
    cdn
    前端 各种插件的官网
  • 原文地址:https://www.cnblogs.com/bieanju/p/6701870.html
Copyright © 2011-2022 走看看