thinkphp/thinkcmf多图上传并保存到数据库
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了thinkphp/thinkcmf多图上传并保存到数据库相关的知识，希望对你有一定的参考价值。
&&思路：图片和一些信息一起上传，先把信息用ajax提交到添加数据的function,添加成功后取到此条信息的主键，存session,返回模板ajax接收返回的信息,接收完毕后，再把多图上传的from表单提交,取到图片的信息，循环后拼接图片路径,根据session存的主键值修改(save)信息(smeta)到数据库，结束
&&这里特别说一下这个 multiple="multiple" 添加上这个之后可以一次选择多个文件进行上传，是 html5 的新属性
<input type="file" name="files[]" id="files" multiple />
listfbzy.html
<tabel>
<tr>
<td class="tb_td_di" align="right"><div align="right">类别：</div></td>
<td class="tb_td" align="left">
<select id="sel" name="sel" >
<option value="出租">出租</option>
<option value="出售">出售</option>
</select>
</td>
<td class="tb_td_di" align="right"><div align="right">房源总价：</div></td>
<td class="tb_td" align="left">
<input name="price" type="text" class="textfield" id="price" maxlength="100"> 万
</td>
</tr>
<tr><td colspan="4"><div class="tishi_ts_o">提示：图片上传为可选填项，如果您没有上传图片，系统自动为您配图(图片格式：‘jpg‘, ‘gif‘, ‘png‘, ‘jpeg‘)</div></td></tr>
<form name="form0" id="form0" method="post" enctype="multipart/form-data" action="{:U(‘Portal/List/upload‘)}">
<tr >
<!-- 这里特别说一下这个 multiple="multiple" 添加上这个之后可以一次选择多个文件进行上传，是 html5 的新属性-->
<td class="tb_td_di tb_td_posi" align="right">
<div class="tb_td_posi_di" align="right">
<div class="inp_wai_btn">点击传图</div>
<input type="file" name="file0[]" id="file0" multiple />
</div></td>
<td class="tb_td_im" colspan="3"><div class="im_wai_divs">
<img src="__TMPL__Public/assets/images/z17.jpg" id="thumb" /><span>注：此图为首页展示图片,只能选择一张图片(图片尺寸：430*290像素左右)</span>
</div></td>
</tr>
<tr><td colspan="4"><div class="tishi_ts_t">以下为两张小区街景图片(尺寸：850*340像素左右)</div></td></tr>
<tr >
<!-- 这里特别说一下这个 multiple="multiple" 添加上这个之后可以一次选择多个文件进行上传，是 html5 的新属性-->
<td class="tb_td_di tb_td_posi" align="right"><div class="tb_td_posi_di" align="right"><div class="inp_wai_btn">点击传图</div><input type="file" name="file7[]" id="file7" multiple /></div></td>
<td class="tb_td_im" colspan="3"><div class="im_wai_divs_th">
<img src="__TMPL__Public/assets/images/z3.jpg" id="img0" >
<img src="__TMPL__Public/assets/images/z4.jpg" id="img1" >
</div></td>
</tr>
</form>
<tr>
<td class="tb_td_di" align="right"> </td>
<td class="tb_td" valign="bottom" colspan="3"><input name="submitSaveEdit" type="button" id="sub" value="提交" style="WIDTH: 80;" >
<span class="STYLE1 colo" style="letter-spacing:1px; margin-left: 10px;">提示:电话号码请您核对正确后发布,每个联系电话一天只能发布三次信息! </span></td>
</tr>
</tabel>
style:
#file0{width: 73px;height: 40px; margin-top: 20px; opacity: 0; margin-right: 10px} #file7{width: 73px;height: 40px; margin-top: 10px; opacity: 0; margin-right: 10px} #thumb{margin-left: 10px} #img0{ width: 300px; height: 200px;margin-left: 10px; margin-bottom: 40px} #img1{ width: 300px;height: 200px;margin-bottom: 40px} .inp_wai_btn{position: absolute; background:#EAEAEA; padding: 0px 8px; border-radius: 4px; margin-top: 10px; z-index: -999} .tb_td_posi{ position:relative;} .tb_td_posi_di{position:absolute; top:0; right:0} .im_wai_divs_th img{ margin:10px 20px 10px 20px; width: 150px; height: 110px} .im_wai_divs img{ margin: 20px 30px 20px 0px; width: 200px; height: 150px} .im_wai_divs_th img{ margin:10px 20px 10px 20px; width: 150px; height: 110px} .im_wai_divs{text-align: left} .im_wai_divs_th{text-align: left}
scriptfbzy.html
//图片预览0开始 $("#file0").change(function(){ // getObjectURL是自定义的函数，见下面 // this.files[0]代表的是选择的文件资源的第一个，因为上面写了 multiple="multiple" 就表示上传文件可能不止一个 // ，但是这里只读取第一个 var objUrlth = getObjectURL(this.files[0]) ; if (objUrlth) { $("#thumb").attr("src", objUrlth) ; } }) ; //建立一個可存取到該file的url function getObjectURL(file) { var url = null ; // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已 if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } return url ; } //图片预览0结束 //图片预览7开始 $("#file7").change(function(){ // getObjectURL是自定义的函数，见下面 // this.files[0]代表的是选择的文件资源的第一个，因为上面写了 multiple="multiple" 就表示上传文件可能不止一个 // ，但是这里只读取第一个 var objUrl = getObjectURL(this.files[0]) ; //图一 // 这句代码没什么作用，删掉也可以 // console.log("objUrl = "+objUrl) ; if (objUrl) { // 在这里修改图片的地址属性 $("#img0").attr("src", objUrl) ; } var objUrl1 = getObjectURL(this.files[1]) ;//图二 if (objUrl1) { $("#img1").attr("src", objUrl1) ; } }) ; //建立一個可存取到該file的url function getObjectURL(file) { var url = null ; // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已 if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } return url ; } //图片预览7结束 /*发布资源开始*/ $(‘#sub‘).click(function(){ var sel = $(‘#sel‘).val(); var price = $(‘#price‘).val(); $.ajax({ url:"{:U(‘Portal/List/ad‘)}",//找到ListController.class.php控制器里面的ad方法，添加信息 data:{sel:sel,price:price}, type:"POST", dataType:"TEXT", success: function(data) { alert(data); $("#form0").submit();//后台添加信息成功后，返回ajax信息之后，再执行图片上传的from的提交 } }) }) /*发布资源结束*/
ListController.class.php
<?php // +---------------------------------------------------------------------- // | ThinkCMF [ WE CAN DO IT MORE SIMPLE ] // +---------------------------------------------------------------------- // | Copyright (c) 2013-2014 http://www.thinkcmf.com All rights reserved. // +---------------------------------------------------------------------- // | Author: Dean <[email protected]> // +---------------------------------------------------------------------- namespace Portal\Controller; use Common\Controller\HomebaseController; class ListController extends HomebaseController { //ajax提交信息存入数据库开始 public function ad() { if(empty($_POST))//如果$_POST空,显示添加页面, { echo ‘您输入的内容不能为空!‘; } else //如果$_POST不为空,走验证,验证是否成功,添加数据库 { $n = D("posts"); $ter = D("term_relationships");//此表是设置添加的文章的object_id,term_id $sel = $_POST["sel"]; $sel = str_replace(‘|‘, ‘‘, $sel);//因为表中某些字段的值用"|"分割读取，所以此方法是把前台传过来的字符串中的"|"过滤掉 $price = $_POST["price"]; $price = str_replace(‘|‘,‘‘, $price); $data[‘post_sm‘] = $sel; $data[‘post_status‘] = 0;//添加文章之后，如果不设置为0(设置为1的时候表示审核通过,在前台能直接调取出来)，在后台文章里面不显示,管理员无法审核 $data[‘post_tele‘]= $price; $data[‘smeta‘] =‘{"thumb":"portal\\/20170504\\/58f024bc2febf.jpg","template":"articel_esfang","photo":[{"url":"portal\\/20170409\\/58ea3d3dae455.jpg","alt":"\\u88571"},{"url":"portal\\/20170409\\/58ea3d459059f.jpg","alt":"\\u88572"}]}‘;//先把固定的图片的路径存到数据库中，在upload()方法中，如果用户不添加图片的话，此三张图片就为默认图片 if(!empty($sel) && !empty($price)) { $nn = $n->add($data); $dt[‘object_id‘] = $nn; $dt[‘term_id‘] = 55;//自定义 $dt[‘status‘] = 1; $tern = $ter->add($dt); session(id, $nn);//$nn为此条信息的主键值 if($nn && $tern) { echo "您发布的信息已传送到后台，请耐心等待审核。。。"; } else { echo "您发布的信息未传送至后台，请重新发布信息或联系客服!"; } } else { echo "您有重要信息未填写，请返回发布信息页面完善重要信息!"; } } } //ajax提交信息存入数据库结束 //图集上传开始 public function upload()//核心:根据id为$nn,修改图片路径(save) { $nn = session(id);//接收ad方法里面存的session值 $xc = M("posts"); $re = M("term_relationships"); $upload = new \Think\Upload();// 实例化上传类 $upload->maxSize = 3145728; //设置上传文件的大小 $p = $upload->rootPath=‘./data/upload/portal‘; //相对路径 $sp = $patht = $upload->savePath = ‘/‘;//和rootPath配合使用,路径为./Public/Uploads $upload->saveName = array(‘uniqid‘,‘‘);//上传文件的保存规则，支持数组和字符串方式定义 $upload->exts = array(‘jpg‘, ‘gif‘, ‘png‘, ‘jpeg‘);//上传文件的类型 $upload->autoSub = true;//自动使用子目录保存上传文件 默认为true, $upload->subName = array(‘date‘,‘Ymd‘);//子目录创建方式，采用数组或者字符串方式定义,和autosub配合使用 $info = $upload->upload(); /*var_dump($info); die();*/ if(!$info) {// 上传错误提示错误信息 //$this->error($upload->getError()); $this->success(‘系统配图中...‘, ‘javascript:history.back(-1);‘,3); } else {// 上传成功 if($info[1] == null || $info[2] == null)//如果第二张或者第三张图片为空值，返回错误信息 { $this->success(‘上传图片数量不够,请重新上传三张图片...‘); $xc->delete($nn);//因为先走ad方法，ajax返回之后再提交表单图片到此方法，所以在表中已经有此条数据,如果用户添加的图片不够,显示错误提示，根据$nn删除两个表中的数据 $re->where("object_id = $nn")->delete(); } else { foreach($info as $key => $f) { $alt = substr($f[‘sha1‘],3,10); $savepath = substr($f[‘savepath‘], 1,-1); if ($key == 0)//在后台文章中显示第一张图片为缩略图，二、三张为相册图集里面的图片,所以根据thinkcmf的图片路径规则来保存 { $sta = ‘{"‘.‘thumb":"portal\\/‘.$savepath.‘\/‘.$f[‘savename‘].‘","template":"articel_esfang","photo":‘; } else { $str .= ‘{"‘.‘url":"portal\\/‘.$savepath.‘\/‘.$f[‘savename‘].‘","alt":"‘.$alt.‘"},‘; } } $stt = $sta.‘[‘.substr($str,0,-1).‘]}‘; $wh[‘id‘] = $nn; $wh[‘smeta‘] = $stt; $xc->save($wh);//根据$nn修改smeta session(null);//清session $this->success(‘图片上传中...‘, ‘javascript:history.back(-1);‘,0); } } } //图集上传结束 }
以上是关于thinkphp/thinkcmf多图上传并保存到数据库的主要内容，如果未能解决你的问题，请参考以下文章