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

最新推荐文章于 2021-03-23 10:01:43 发布
最新推荐文章于 2021-03-23 10:01:43 发布
阅读量4.3k 收藏 4
点赞数 1
分类专栏： PHP JS HTML jquery 文章标签： php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38576764/article/details/77983837
版权
PHP 同时被 3 个专栏收录
43 篇文章 1 订阅
订阅专栏
JS
20 篇文章 0 订阅
订阅专栏
HTML
15 篇文章 0 订阅
订阅专栏

先上代码

  • 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. 有同行的菜鸟一起吗~
Las_wang
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
php上传图片并预览源码
04-14
php上传图片并预览图片源码包含html静态页和php源码类页面
PHP上传图片带预览功能
03-27
PHP上传图片带预览功能、控制图片上传大小，可根据自己的需要扩展功能。
PHP实现多张图片上传预览功能实例
weixin_34248118的博客
10-23 1164
PHP实现多张图片上传预览功能实例，支持左右切换位置、删除图片、图片数量限制，通过点击获取图片按钮可以获取上传图片的封面和所有图片等实用功能 向左移动图片 function reverse_left(obj) { var obj_li = obj.parents("li"); var obj_prev = obj_li.prev("li"); if (obj_prev...
php批量上传预览图片,php批量上传五[带预览]
weixin_42469706的博客
03-23 108
$path=$_SERVER["DOCUMENT_ROOT"];//服务器路径$i = 0;foreach ($_FILES["pictures"]["error"] as $key => $error) {if ($error == UPLOAD_ERR_OK) {$upload_file=$_FILES['pictures']['tmp_name'][$key];//文件被上传后在服务端...
多图上传以及多图排序的方法及流程详解
空白_回忆的博客
03-02 1万+
多图上传以及多图排序的方法及流程详解所用插件包打包下载CSDN地址：点这里1、选择多图上传插件：pluploader.full.min.js（此插件经过试用非常好用，比百度的webuploader好用太多，但是需要翻墙下载，为了大家方便，上面包里都有）2、用户选择多张图以后，该插件按队列，自动用ajax单张上传3、服务器端使用单张图片处理操作即可，保存完毕后返回一个图片在服务器的地址4、前端js在该
php 点击选择图片上传,php上传多张图片时，选择图片后即可预览的问题
weixin_34352414的博客
03-09 201
这几天一直在解决一个问题，上传图片时选择成功后就能预览。需求：在点击上传图标的时候会在前面的input框中显示出文件名，然后点击后面的查看按钮就可以预览选择的这张图片了，要求不能刷新页面1.一开始的时候打算用ajax上传，后来发现多张图片一同上传的时候会出现问题，ajax上传图片的原理是当你选中一张图片的时候会使用js在这个type为file的input的框外面包上一个form表单然后通过ajax...
PHP上传多张图片预览并回显，支持PC端与移动端
lizige2008的博客
05-10 1246
这几天在做一个小项目，其中有一个功能是php上传多张图片并且要有预览，回显，删除等功能。支持PC端与移动端。 上传文件我们第一时间想到的是表单里面的type=file方法。没错，我们就是用这种方法来实现。 我查网上资料的时候，很多用ajax来提交数据，这里我们直接用submit按钮来实现，很传统，适合小白学习用，也可用于项目当中。 首先来看看代码： <input class="uploadImg" type="file" name="file[]" multiple id="file" accept=
CSS sprites
qq_38577700的博客
09-08 456
CSS sprites是什么？ CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。 优点 减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和； 减少了命名困扰：只需对一张集合的图片命
php多图片上传预览删除实现
滴水石穿
06-11 1313
php多图片上传预览删除实现 最近需要用到这个效果，苦苦挣扎了两天，最后终于实现了想要的效果，特地再次复盘，理清一下思路： 第一步、理清思路，流程梳理： 前端通过 input 可以选择【多图或单图】上传，选择图片后，通过ajax提交表单到后台，后台php处理多图片上传，并返回数据【图片的保存路径，图片名称】！ ajax接受返回的数据，然后创建<img>和<input>元素并绑定返回的图片地址和id,插入html文档，前端达到预览图片的效果，还可实现删除和设为封面等操作！ 前端实
php 多图上传 预览后删除,JS多图预览、删除、上传（详细）
weixin_39811478的博客
03-17 193
JS多图上传相比大家都会但是上传到网页预览的时候，可能会进行筛选，删除一部分操作file文件想必大家很少有试过吧下面来说一下完整的实现方法这里使用的是 formdata 的方式 通过ajax来上传图片首先我们需要两个按钮 选择图片 、 上传按钮.png文件上传的 input太丑了 我们把他隐藏起来当点击 选择图片按钮的时候 我们用$("#file").trigger("click")...
php图片上传存储源码并且可以预览
12-18
复制代码 代码如下: <?php header(“content-Type: text/html; charset=gb2312”); $uptypes=array(‘image/jpg’, //上传文件类型列表 ‘image/jpeg’, ‘image/png’, ‘image/pjpeg’, ‘image/gif’, ‘image/bmp’, ‘application/x-shockwave-flash’, ‘image/x-png’, ‘application/msword’, ‘audio/x-ms-wma’, ‘audio/mp3’, ‘application/vnd.rn-real
jQuery File Upload文件上传插件使用详解
01-19
jQuery File Upload 是一个Jquery文件上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。 官网链接：https://github.com/blueimp/jQuery-File-Upload/wiki 　　特点：拖放支持；上传进度条；图像预览；可定制和可扩展的；兼容任何服务器端应用平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.）。 使用方法： 1. 需要加载的js文件： jquey-1.8.3.min.js jquery-ui-widge
图片上传（php实现单图、多图都有）
03-12
此款为图片上传插件、利用php+html实现的一个功能。同时还带有图片删除（直接删除本地资源文件）。我写了好几种方案可以去实现
PHP仿微信多图片预览上传实例代码
10-21
主要介绍了PHP仿微信多图片预览上传方法的相关资料,需要的朋友可以参考下
PHP仿微信多图片预览上传
08-30
PHP仿微信多图片预览上传
PHP仿微信多图片上传代码带预览
10-22
PHP仿微信多图片上传代码带预览功能，可用于手机上传开发
仿微信多图片上传
03-12
仿照微信，朋友圈分享图片功能 。可以进行图片的多张选择，拍照添加图片，以及进行图片的预览，预览时可以进行缩放，并且可以删除选中状态的图片 。很不错的源码，大家有需要可以下载看看 。
JS三种初始化方法
热门推荐
Wanglas的博客
11-13 3万+
1.<script type="text/javascript"> //init method one $(document).ready(function(){ trace("初始化方法进入"); }); function trace(obj){ console.log(obj); } </script> 2.<script type="text/javascript"> //i
Echarts实现省份下点击跳转到指定链接
Wanglas的博客
11-24 6010
因为项目要做一个辽宁省特产区域，涉及到地图。 话不多说上代码前端<!doctype html> <html><head> <meta charset="utf-8"> <title>辽宁地区</title></head><body> <div id="main" style="height:800px;"></div> <script src="__PUBLIC__/Home/js
java实现仿微信聊天
最新发布
06-12
要实现仿微信聊天的功能，需要使用Java编程语言和相关的开发框架。以下是一个简单的实现步骤： 1.设计数据模型：需要设计一个数据模型，包括用户信息、聊天记录等。 2.开发服务端：使用Java开发服务端，实现用户登录、注册、添加好友、发送消息等功能。 3.开发客户端：使用Java开发客户端，实现用户登录、注册、查找好友、发送消息等功能。 4.使用第三方SDK：可以使用第三方SDK来实现一些复杂的功能，例如消息推送。 5.数据库存储：将用户信息、聊天记录等数据存储到数据库中。 6.界面设计：设计一个美观、易用的UI界面。 需要注意的是，实现仿微信聊天功能需要考虑到用户的隐私和安全问题，需要进行数据加密和网络安全防护等措施。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值