文件选择器
第一步:在需要用到上传文件的地方,写入下面的两句代码
<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()