TP5框架实现一次选择多张图片并预览的方法示例


Posted in PHP onApril 04, 2020

本文实例讲述了TP5框架实现一次选择多张图片并预览的方法。分享给大家供大家参考,具体如下:

点击选择图片(可选多张),确定后将选择的图片显示在页面上,已经选择的图片也可以删除,点击提交将图片提交给后台。

1、效果图

TP5框架实现一次选择多张图片并预览的方法示例

2、code

用input标签并选择type=file,记得带上multiple,不然就只能单选图片了

如果不想通过 ajax 提交,一定要加上文件传输协议 ( enctype="multipart/form-data" )

view

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>showImages</title>
  <style type="text/css">
    .float{
      float:left;
      width : 200px;
      height: 200px;
      overflow: hidden;
      border: 1px solid #CCCCCC;
      border-radius: 10px;
      padding: 5px;
      margin: 5px;
    }
    img{
      position: relative;
    }
    .result{
      width: 200px;
      height: 200px;
      text-align: center;
      box-sizing: border-box;
    }
    #file_input{
      display: none;
    }
    .delete{
      width: 200px;
      height:200px;
      position: absolute;
      text-align: center;
      line-height: 200px;
      z-index: 10;
      font-size: 30px;
      background-color: rgba(255,255,255,0.8);
      color: #777;
      opacity: 0;
      transition-duration: :0.7s;
      -webkit-transition-duration: 0.7s;
    }
    .delete:hover{
      cursor: pointer;
      opacity: 1;
    }
  </style>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    window.onload = function(){
      var input = document.getElementById("file_input");
      var result;
      var dataArr = []; // 储存所选图片的结果(文件名和base64数据)
      var fd; //FormData方式发送请求
      var oSelect = document.getElementById("select");
      var oAdd = document.getElementById("add");
      var oSubmit = document.getElementById("submit");
      var oInput = document.getElementById("file_input");

      if(typeof FileReader==='undefined'){
        alert("抱歉,你的浏览器不支持 FileReader");
        input.setAttribute('disabled','disabled');
      }else{
        input.addEventListener('change',readFile,false);
      } //handler

      function readFile(){
        fd = new FormData();
        var iLen = this.files.length;
        var index = 0;
        for(var i=0;i<iLen;i++){
          if (!input['value'].match(/.jpg|.gif|.png|.jpeg|.bmp/i)){//判断上传文件格式
            return alert("上传的图片格式不正确,请重新选择");
          }
          var reader = new FileReader();
          reader.index = i;
          fd.append(i,this.files[i]);
          reader.readAsDataURL(this.files[i]); //转成base64
          reader.fileName = this.files[i].name;

          reader.onload = function(e){
            var imgMsg = {
              name : this.fileName,//获取文件名
              base64 : this.result  //reader.readAsDataURL方法执行完后,base64数据储存在reader.result里
            }
            dataArr.push(imgMsg);
            result = '<div class="delete">delete</div><div class="result"><img src="'+this.result+'" alt=""/></div>';
            var div = document.createElement('div');
            div.innerHTML = result;
            div['className'] = 'float';
            div['index'] = index;
            document.getElementsByTagName('body')[0].appendChild(div); //插入dom树
            var img = div.getElementsByTagName('img')[0];
            img.onload = function(){
              var nowHeight = ReSizePic(this); //设置图片大小
              this.parentNode.style.display = 'block';
              var oParent = this.parentNode;
              if(nowHeight){
                oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px';
              }
            }

            div.onclick = function(){
              this.remove();         // 在页面中删除该图片元素
              delete dataArr[this.index]; // 删除dataArr对应的数据

            }
            index++;
          }
        }
      }

      function send(){
        var submitArr = [];
        for (var i = 0; i < dataArr.length; i++) {
          if (dataArr[i]) {
            submitArr.push(dataArr[i]);
          }
        }
        // console.log('提交的数据:'+JSON.stringify(submitArr))
        $.ajax({
          url : 'http://39.106.182.218',
          type : 'post',
          data : JSON.stringify(submitArr),
          dataType: 'json',
          //processData: false,  用FormData传fd时需有这两项
          //contentType: false,
          success : function(data){
            console.log('返回的数据:'+JSON.stringify(data))
          }

        })
      }

      oSelect.οnclick=function(){
        oInput.value = "";  // 先将oInput值清空,否则选择图片与上次相同时change事件不会触发
        //清空已选图片
        $('.float').remove();
        dataArr = [];
        index = 0;
        oInput.click();
      }

      oAdd.οnclick=function(){
        oInput.value = "";  // 先将oInput值清空,否则选择图片与上次相同时change事件不会触发
        oInput.click();
      }

      oSubmit.οnclick=function(){
        if(!dataArr.length){
          return alert('请先选择文件');
        }
        send();
      }
    }
    /*
     用ajax发送fd参数时要告诉jQuery不要去处理发送的数据,
     不要去设置Content-Type请求头才可以发送成功,否则会报“Illegal invocation”的错误,
     也就是非法调用,所以要加上“processData: false,contentType: false,”
     * */

    function ReSizePic(ThisPic) {
      var RePicWidth = 200; //这里修改为您想显示的宽度值

      var TrueWidth = ThisPic.width; //图片实际宽度
      var TrueHeight = ThisPic.height; //图片实际高度

      if(TrueWidth>TrueHeight){
        //宽大于高
        var reWidth = RePicWidth;
        ThisPic.width = reWidth;
        //垂直居中
        var nowHeight = TrueHeight * (reWidth/TrueWidth);
        return nowHeight; //将图片修改后的高度返回,供垂直居中用
      }else{
        //宽小于高
        var reHeight = RePicWidth;
        ThisPic.height = reHeight;
      }
    }
  </script>
</head>
<body>
<div class="container">
  <label>请选择一个图像文件:</label>
  <button id="select">(重新)选择图片</button>
  <button id="add">(追加)图片</button>

<form action="" method="post" enctype="multipart/form-data">
  <input type="file" id="file_input" name="image[]" multiple/>
  <!--用input标签并选择type=file,记得带上multiple,不然就只能单选图片了-->
  <button id="submit">提交</button>
</form>

</div>
</body>
</html>

controller

$image=request()->file('image');
print_r($image);

3、over!!!

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

PHP 相关文章推荐
php反弹shell实现代码
Apr 22 PHP
两个强悍的php 图像处理类1
Jun 15 PHP
PHP写UltraEdit插件脚本实现方法
Dec 26 PHP
PHP中3种生成XML文件方法的速度效率比较
Oct 06 PHP
浅析PHP递归函数返回值使用方法
Feb 18 PHP
CodeIgniter CLI模式简介
Jun 17 PHP
php使用正则表达式获取图片url的方法
Jan 16 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
May 20 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
Aug 12 PHP
thinkPHP5框架auth权限控制类与用法示例
Jun 12 PHP
PHP使用mongoclient简单操作mongodb数据库示例
Feb 08 PHP
php面向对象重点知识分享
Sep 27 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
Apr 04 #PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
Apr 04 #PHP
thinkphp框架表单数组实现图片批量上传功能示例
Apr 04 #PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
Apr 04 #PHP
yii框架结合charjs实现统计30天数据的方法
Apr 04 #PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
Apr 04 #PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
Apr 04 #PHP
You might like
php中$this-&amp;gt;含义分析
2009/11/29 PHP
初识Laravel
2014/10/30 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
浅析return false的正确使用
2013/11/04 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
python: 自动安装缺失库文件的方法
2018/10/22 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
parser.add_argument中的action使用
2020/04/20 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
商务会议邀请函
2014/01/09 职场文书
社区工作者思想汇报
2014/01/13 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
2014年残联工作总结
2014/11/21 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python