PHP实现多图上传预览~(仿微信)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_38576764/article/details/77983837

先上代码

  • 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;
        }
  1. 后台代码(未完成)
  2. 先创建出节点。
  3. 为节点绑定onchange函数,执行previewImg()函数。
  4. 特别注意传入this对象(当前所执行节点的对象)。
  5. 限制只能传入6张图片。
  6. 还未完成~明天继续~
  7. 有同行的菜鸟一起吗~
展开阅读全文

没有更多推荐了,返回首页