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函数解决SQL injection
Dec 09 PHP
常用的PHP数据库操作方法(MYSQL版)
Jun 08 PHP
destoon安装出现Internal Server Error的解决方法
Jun 21 PHP
PHP中file_get_contents高?用法实例
Sep 24 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
Sep 27 PHP
php中PDO方式实现数据库的增删改查
May 17 PHP
php实现的简单美国商品税计算函数
Jul 13 PHP
php截取视频指定帧为图片
May 16 PHP
PHP判断数组是否为空的常用方法(五种方法)
Feb 08 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
Nov 16 PHP
使用XHProf查找PHP性能瓶颈的实例
Dec 13 PHP
统计PHP目录中的文件数方法
Mar 05 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数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
$.format,jquery.format 使用说明
2011/07/13 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
python 表格打印代码实例解析
2019/10/12 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
医药个人求职信范文
2014/01/29 职场文书
保安队长职务说明书
2014/02/23 职场文书
企业元宵节主持词
2014/03/25 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
2014年司法局工作总结
2014/12/11 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
Java实现多线程聊天室
2021/06/26 Java/Android