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日历[测试通过]
Mar 27 PHP
php入门学习知识点七 PHP函数的基本应用
Jul 14 PHP
PHP中执行cmd命令的方法
Oct 11 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
Nov 25 PHP
9条PHP编程小知识及易犯的小错误
Jan 22 PHP
php防止sql注入简单分析
Mar 18 PHP
PHP判断IP并转跳到相应城市分站的方法
Mar 25 PHP
php实现有趣的人品测试程序实例
Jun 08 PHP
腾讯CMEM的PHP扩展编译安装方法
Sep 25 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
Jan 28 PHP
使用Yii2实现主从数据库设置
Nov 20 PHP
PHP如何通过带尾指针的链表实现'队列'
Oct 22 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中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
Python2包含中文报错的解决方法
2018/07/09 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
计算机开发个人求职信范文
2013/09/26 职场文书
省三好学生申请材料
2014/01/22 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
党支部公开承诺书
2014/03/28 职场文书
工会趣味活动方案
2014/08/18 职场文书
建筑节能汇报材料
2014/08/22 职场文书
婚内房产协议书范本
2014/10/02 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
党员承诺书范文2015
2015/04/27 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
Pandas数据类型之category的用法
2021/06/28 Python