1、引入必备css和js
<link rel="stylesheet" type="text/css" href="__PUBLIC__/mobile/css/webuploader.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/mobile/css/diyUpload.css">
<script src="__PUBLIC__/mobile/js/webuploader.html5only.min.js"></script>
<script src="__PUBLIC__/mobile/js/diyUpload.js"></script>
2、单图和多图html
<form id="form1">
<div id="piccode">
<h1>商家二维码：</h1>
<div id="code"></div>
<notempty name="data.wechat_picture">
<div class="parentFileBox">
<ul class="fileBoxUl">
<li id="fileBox_WU_FILE_0">
<div class="viewThumb"><img src="__ROOT__/{$data.wechat_picture}"></div>
<div class="diyCancel"></div>
<div class="diySuccess" style="display: block;" onclick="delfile(this)"></div>
<div class="diyBar" style="display: none;">
</div>
<input name="wechat_picture" value="{$data.wechat_picture}" type="hidden">
</li>
</ul>
</div>
</notempty>
</div>
<div id="demo">
<h1>产品图片：</h1>
<div id="as"></div>
<notempty name="pics">
<div class="parentFileBox">
<ul class="fileBoxUl">
<foreach name="pics" item="pic" key="key">
<!-- fileBox_WU_FILE_ 这个后面的参数必须给个基数，因为新添加的都是从0开始，id会重复-->
<li id="fileBox_WU_FILE_10{$key}">
<div class="viewThumb"><img src="__ROOT__/{$pic.picture}"></div>
<div class="diyCancel"></div>
<div class="diySuccess" style="display: block;" onclick="delfile(this)"></div>
<div class="diyBar" style="display: none;">
</div>
<input name="pics[]" value="{$pic.picture}" type="hidden">
</li>
</foreach>
</ul>
</div>
</notempty>
</div>
</form>
3、页面js
a表单提交
$(document).ready(function() {
$("#btn_submit").click(function() {
$.post("{:U('home/index/index')}", $('#form1').serialize(),
function(data) {
var msg = jQuery.parseJSON(data);
if(msg.code != 100100) {
return;
} else {
window.location.href = "{:U('home/index/index',array('id'=>'1'))}";
}
});
});
});
b访问后台上传方法，回调图片地址参数，构建html写入地址参数到隐藏input
<script type="text/javascript">
/*
* 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯;
* 其他参数同WebUploader
*/
var token = $('#token').val();
$('#test').diyUpload({
url: "{:U('home/index/webup')}",
formData: {
token: token
},
fileVal: 'upimage',
success: function(data) {
if(data.code == 100100) {
$('#box').find('li').last().append('<input name="picture" value="' + data.path + '" type="hidden">');
}
},
error: function(err) {},
chunked: true,
fileNumLimit: 1,
});
$('#as').diyUpload({
url: "{:U('home/index/webup')}",
formData: {
token: token
},
fileVal: 'upimage',
success: function(data) {
if(data.code == 100100) {
$('#demo').find('li').last().append('<input name="pics[]" value="' + data.path + '" type="hidden">');
}
},
error: function(err) {},
buttonText: ' ',
chunked: true,
// 分片大小
chunkSize: 512 * 1024,
//最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
fileNumLimit: 50,
fileSizeLimit: 500000 * 1024,
fileSingleSizeLimit: 50000 * 1024,
accept: {}
});
</script>
4、后台方法
a、图片上传方法，回调上传好的图片地址
public function webup()
{
$config = array(
'mimes' => array(), //允许上传的文件MiMe类型
'maxSize' => 0, //上传的文件大小限制 (0-不做限制)
'exts' => array('jpg', 'gif', 'png', 'jpeg'), //允许上传的文件后缀
'autoSub' => true, //自动子目录保存文件
'subName' => array('date', 'Y-m-d'), //子目录创建方式，[0]-函数名，[1]-参数，多个参数使用数组
'rootPath' => './Public/Uploads/goods/', //保存根路径
'savePath' => '', //保存路径
);
$upload = new ThinkUpload($config); // 实例化上传类
$info = $upload->upload();
if (!$info) {
$this->error($upload->getError()); // 上传错误提示错误信息
} else {// 上传成功
/*
* 分离缩略图和轮播图
*/
// dump($info);
foreach ($info as $va) {
if ($va['key'] == 'suoluetu') {
$suoluetu .= 'Public/Uploads/goods/'.$va['savepath'].$va['savename'];
} else {
$lunbotu .= 'Public/Uploads/goods/'.$va['savepath'].$va['savename'];
}
}
}
if (!$info) {
$data = array(
'code' => 100101,
);
echo json_encode($data);
exit;
} else {
$suoluetu .= 'Public/Uploads/goods/'.$va['savepath'].$va['savename']; // 上传成功 获取上传文件信息
$data = array(
'code' => 100100,
'path' => $suoluetu,
);
echo json_encode($data);
exit;
}
}
b、展示表单和将整个表单添加、修改数据库
public function index()
{
$id = I('id');
if (IS_POST) {
$data['picture'] = I('picture');
$data['wechat_picture'] = I('wechat_picture');
$data['pics'] = I('pics');
$data['auth_pics'] = I('auth_pics');
if (!$id) {
$data['id'] = md5(uniqid());
D('product')->add($data);
$pics = I('pics');
foreach ($pics as $k => $v) {
D('productPics')->add(array(
'pid' => $data['id'],
'picture' => $data['pics'],
));
}
$res['code'] = 100100;
$res['message'] = '添加成功';
echo json_encode($res);
return;
} else {
// 直接删除 所有id下的关联，然后重新添加
$pics = $data['pics'];
D('productPics')->where(array('pid' => $id))->delete();
foreach ($pics as $k => $v) {
D('productPics')->add(array(
'pid' => $id,
'picture' => $v,
));
}
D('product')->where(array('id' => $id))->save($data);
$res['code'] = 100100;
$res['message'] = '添加成功';
echo json_encode($res);
return;
}
} else {
$data = D('product')->find($id);
$pics = D('productPics')->where(array('pid' => $data['id']))->select();
}
$this->assign(array(
'data' => $data,
'pics' => $pics,
));
$this->display('');
}