Webuploader 出坑记

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;" οnclick="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;" οnclick="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 \Think\Upload($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(''); }

转载于:https://www.cnblogs.com/jamescr7/p/8194411.html

总结

以上是生活随笔为你收集整理的Webuploader 出坑记的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。