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 出坑记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。