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系统流量分析的程序
Oct 09 PHP
PHP设计模式之代理模式的深入解析
Jun 13 PHP
php获取参数的几种方法总结
Feb 18 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
Jun 20 PHP
ThinkPHP自动填充实现无限级分类的方法
Aug 22 PHP
php生成百度sitemap站点地图类函数实例
Oct 17 PHP
PHP中使用匿名函数操作数据库的例子
Nov 17 PHP
WordPress中用于获取文章作者与分类信息的方法整理
Dec 17 PHP
php 调用ffmpeg获取视频信息的简单实现
Apr 03 PHP
PHP7下协程的实现方法详解
Dec 17 PHP
PHP中非常有用却鲜有人知的函数集锦
Aug 17 PHP
PHP中通过getopt解析GNU C风格命令行选项
Nov 18 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仿ZOL分页类代码
2008/10/02 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
一段实时更新的时间代码
2006/07/07 Javascript
[原创]图片分页查看
2006/08/28 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
详解JS数值Number类型
2018/02/07 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
python 网络爬虫初级实现代码
2016/02/27 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
浅谈Python基础—判断和循环
2019/03/22 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
全球性的在线商店:Vogca
2019/05/10 全球购物
社区庆中秋节活动方案
2014/02/07 职场文书
请假条的格式
2014/04/11 职场文书
课外小组活动总结
2014/08/27 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
出纳岗位职责范本
2015/03/31 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL