码迷,mamicode.com
首页 > 数据库 > 详细

thinkphp/thinkcmf多图上传并保存到数据库

时间:2017-05-13 12:24:02      阅读:2486      评论:0      收藏:0      [点我收藏+]

标签:文章   20px   pat   echo   pos   ima   fine   eth   sha   

&&思路:图片和一些信息一起上传,先把信息用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">&nbsp;</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>    
View Code

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}
View Code

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的提交
        }
        })
    })
/*发布资源结束*/
View Code

ListController.class.php

技术分享
<?php
// +----------------------------------------------------------------------
// | ThinkCMF [ WE CAN DO IT MORE SIMPLE ]
// +----------------------------------------------------------------------
// | Copyright (c) 2013-2014 http://www.thinkcmf.com All rights reserved.
// +----------------------------------------------------------------------
// | Author: Dean <zxxjjforever@163.com>
// +----------------------------------------------------------------------
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);
        }
    }  
}    
//图集上传结束    
}
View Code

 

thinkphp/thinkcmf多图上传并保存到数据库

标签:文章   20px   pat   echo   pos   ima   fine   eth   sha   

原文地址:http://www.cnblogs.com/cuizhenyu/p/6848356.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!