文件选择器


第一步:在需要用到上传文件的地方,写入下面的两句代码

<span class="upload-btn upload-btn1">上传按钮</span>
<img class="temp-preview-image" src="${brand.logo!''}">  <!-- 如果为编辑模式,则添加这个img. class不能变化,src为后端传过来的图片地址-->
<input type="hidden"  name="" maxlength="100" autocomplete="off" value="">

要在表单中添加一个input.file的隐藏域,隐藏域的值可以变为上传后的路径。

第二步:在页面中调用

  • 添加文件:
 var options={
     preview: true,  // 是否开启预览功能. 默认开启(为了兼容旧代码)
     //文件上传成功后回调
     success:function(data,ele){   // 本回调函数已更新,但兼容旧版本。(推荐用最新写法)
          ele.val(data);  
         },error:function(error){
          console.log(error);
     }    
}
$('.upload-btn1').FilesUpload(options);
  • 修改文件:
 var options={
     preview: true,  // 是否开启预览功能. 默认开启(为了兼容旧代码)
     defaultData : ['${ctx}/core/upload.do'],                 
     //文件上传成功后回调
     success:function(data,ele){
        ele.val(data);
     },error:function(error){
         console.log(error);
     }
}
$('.upload-btn1').FilesUpload(options);
defaultData要设置为编辑时此业务相应的路径
如果遇到弹出层初始化时由后端模板实现的话,请参考品牌列表页 `<brand_edit.html >`        

图片选择器


一步到位: 适当时刻调用选择器方法
  • 单图上传

                      $.GoodsAdminSelector({
                          maxLength: 1, //可选择商品数量
                          confirm: function (goods) { // 确定之后的回调函数
                              // goods 是用户选择的商品数据.
                              // 当maxLength为1时,goods为一个对象;>1时,否则goods为对象数组
                          }
                      });
    
  • 多图上传

    只需要修改jquery.singleImageSelector.js文件中的参数fileNumLimit
    

    更多传参信息请查看jquery.singleImageSelector.js文件
    PS: JS文件引用在header.html中

商品选择器


后台商品选择器

一步到位: 适当时刻调用选择器方法
  $.GoodsAdminSelector({
                        maxLength: 1, //可选择商品数量
                        confirm: function (goods) { // 确定之后的回调函数
                            // goods 是用户选择的商品数据.
                            // 当maxLength为1时,goods为一个对象;>1时,否则goods为对象数组
                        }
                    });

商家商品选择器

首先定义一个锚点元素:

<div id='test'></div>

然后调用商家选择器

$("#test").GoodsSellerSelector({
    maxLength: 0,  //最大可选商品数量,0代表无数量限制.
    goodsIdList: [152, 153], // 默认选择的商品ID
    refresh: function (data) {   // 商品数据发生变化时的回调函数.
        console.log('Goods has changed-->',data);
    }
});

(PS: JS文件在header中被引用)

返回数据格式示例


{
    "goods_id": 156,
    "name": "centrum/善存复合维生素 男士多维片矿物质",
    "sn": "00050",
    "thumbnail": "http://static.b2b2cv2.javamall.com.cn/attachment//store/1/goods/2017/6/14/14//56121918_thumbnail.jpg",
    "enable_store": 0,
    "store": 0,
    "price": 99,
    "create_time": 1497423336,
    "market_enable": 1,
    "brand_name": "维生素/矿物质",
    "category_name": "维生素/矿物质"
}

更多传参信息请查看jquery.goodsSelector.js文件
PS: JS文件引用在header.html中

表单序列化为Json


var active  = $("form").serializeJson()

results matching ""

    No results matching ""