PHP实现多图上传预览~（仿微信）

来源：互联网发布：淘宝创建店铺流程编辑：程序博客网时间：2024/06/05 19:45

先上代码

1.前台图片上传代码

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>发表话题</title>    <link href="__PUBLIC__/Home/css/topic.css" rel="stylesheet">    <script src="__PUBLIC__/Home/js/jquery.min.js"></script></head><style media="screen">  .say{    width: 100%;    font-size: 2.2rem;    text-align: center;    line-height: 7rem;    text-decoration: none;    color: white;    display: block;    background-color: #ff5711;    border-radius: 40px;  }</style><script type="text/javascript">    function up(){    var num=$('input').size();    if(num==7){      alert('最多上传6张图片~');      return ;    } else if(num == 1) {      var input = document.createElement("input");      var num=$('input').size();      alert(num);      input.type = 'file';      input.name = 'photo[]';      input.style.display ='none';      // input.setAttribute("onchange",PreviewImage);      var picInut = document.getElementById('picInput');      picInut.appendChild(input);      $('input:last').on('change',function(){          PreviewImage(this);      });      $('input:first').click();    }else{      $('input:last').click();      var input = document.createElement("input");      input.type = 'file';      input.name = 'photo[]';      input.style.display ='none';      // input.setAttribute("onchange",PreviewImage);      var picInut = document.getElementById('picInput');      picInut.appendChild(input);      $('input:last').on('change',function(){        PreviewImage(this);      });    }  }  // 预览图片js  function PreviewImage(imgFile)  {      var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);      filextension=filextension.toLowerCase();      if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))      {          alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");          imgFile.focus();      }      else      {          var path;          if(document.all)//IE          {              imgFile.select();              path = document.selection.createRange().text;              document.getElementById("imgPreview").innerHTML="";              document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果          }          else//FF          {              path=window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上              //path = imgFile.files[0].getAsDataURL();// FF 3.0              $('#imgPreview').append("<img id='img1' width='160px' height='130px' src='"+path+"'/>");              //document.getElementById("img1").src = path;          }      }  }  function IsNull(str) {      return (Trim(str) == "") ? false : true;  }  function Trim(str) {      return str.replace(/(^\s*)|(\s*$)/g, "");  }  function replaceHTML(str){    str = str.replace(/<[^>].*?>/g,"");    str = str.replace(/&nbsp;/g,"");    return str;  }  function sm(){    var content = document.getElementById("send_content").value;      if(!IsNull(replaceHTML(content))){        alert('请填写内容');        return false;      }  }</script><body>   <div id="all">     <div id="title">         <div id="zuojianjiao">           <p style="line-height:8rem;">             <a href="{:U('Comment/index')}">               <img src="__PUBLIC__/Home/img/qietu/secondphonerecover/second_01.jpg" style="margin-left:1rem;">             </a>           </p>         </div>         <div>           <p style="line-height:8rem;">             发布           </p>         </div>     </div>       <!---------------------------------->       <form id="form" method="post" enctype="multipart/form-data" >           <div class="textarea">               <textarea id="send_content" name="content" placeholder="你想说点什么..."></textarea>           </div>           <!-- 图片上传 -->           <div class="pick_img" id="picInput">               <input id="upimg" type="file" name="photo[]" value="" style="display:none;" onchange="PreviewImage(this);" multiple="multiple">               <div id="imgPreview" style='float: left;'>               </div>               <img src="__PUBLIC__/Home/img/qietu/comment/add.png" alt="" onclick="up();">           </div>           <div class="line">           </div>           <div class="bottom">             <button onclick="sm();" name="button" class="say">确认发表</button>           </div>       </form>   </div>   <!-- 图片预览js -->   <script>       function addPic1(){        var addBtn =  document.getElementById('addBtn');        var input = document.createElement("input");        input.type = 'file';        input.name = 'myfile[]';        var picInut = document.getElementById('picInput');        picInut.appendChild(input);        if(picInut.children.length == 3){            addBtn.disabled = 'disabled';        }    }   </script></body></html>

2.css代码

*{  list-style: none;  }body{ margin: 0; padding: 0; }#all{ min-height:108rem; _min-height:108rem; }p{ margin: 0;  padding: 0; }#title{    width: 100%;    height: 8rem;    background-color: #f8f8f8;    color: #e95011;    font-size: 42px;    text-align: center;    line-height: 9rem;}#zuojianjiao{    width: 10%;    float: left;    height: 100%;}#title div:nth-child(2){    width: 80%;    height: 8rem;    float: left;    color: #e95011;    margin: 0 auto;    font-weight: bold;}/*-------------------------------*/.textarea{    width: 91%;    min-height:20rem;    /*border: 0.1rem solid #dcdcdc;*/    margin: 0 auto;    margin-top: 5rem;}.textarea textarea{    width: 100%;    min-height: 20rem;    font-size: 3.2rem;    border: 0.1rem solid white;}.bottom{    width: 85%;    height: 7rem;    margin: 0 auto;    margin-top:46rem;}.bottom a{    width: 100%;    font-size: 2.2rem;    text-align: center;    line-height: 7rem;    text-decoration: none;    color: white;    display: block;}/*图片样式*/.pick_img{  width: 91%;  margin: 0 auto;  padding-bottom: 2rem;}.line{    border-bottom: 1px solid grey;}

3.php后台存储代码

        $upload = new \Think\Upload();// 实例化上传类        $upload->maxSize   =     3145728 ;// 设置附件上传大小        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型        $upload->savePath  =      'comment/'; // 设置附件上传目录        $info=array();        foreach ($_FILES['photo']['name'] as $key=>$value){            //photo 为前端name字段名称            $file1=array();            $file1["photo"]['name']=$value;             $file1["photo"]['type']=$_FILES['photo']["type"][$key];            $file1["photo"]['tmp_name']=$_FILES['photo']["tmp_name"][$key];            $file1["photo"]['error']=$_FILES['photo']["error"][$key];            $file1["photo"]['size']=$_FILES['photo']["size"][$key];            $info   =   $upload->upload();            foreach ($info as $key=>$value)               {                 $a.="#"."/yikuai/Uploads/".$value['savepath'].$value['savename'];//我用符号把图片路径拼起来               }             }         $data["intro_pic"]=substr($a,1);           $info1   =  $upload->upload();         foreach ($info1 as $key=>$value)         {          $data["$key"]=$value['savepath'].$value['savename'];         }         $imgurl = $data["intro_pic"];

4.php前台模板输出

      foreach ($list as $key => $value) {          $v=explode('#',$value['cimg']);          $list[$key]['cimg']=$v;      //重写字段很重要~~~ $list[$key]['cimg]  不能写成 $value['cimg'];      }

5.前台模板输出图片

    <foreach name="la['cimg']" item="ccimg">       <img class="c_img_detail" src="{$ccimg}" alt="">     </foreach>

ps：图片输出样式注意在没有图片输出的情况下 —-为了去掉无图片下的边框

        img[src=""]{          opacity: 0;          height: 0rem;        }

后台代码（未完成）
先创建出节点。
为节点绑定onchange函数，执行previewImg()函数。
特别注意传入this对象（当前所执行节点的对象）。
限制只能传入6张图片。
还未完成~明天继续~
有同行的菜鸟一起吗~

阅读全文

0 0