首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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程序设计有所帮助。

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

- Author -

Anwug！

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
用PHP控制用户的浏览器--ob*函数的使用说明
Mar 16 PHP
php中几种常见安全设置详解
Apr 06 PHP
有关PHP中MVC的开发经验分享
May 17 PHP
PHP中将网页导出为Word文档的代码
May 25 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
Jun 03 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
Sep 24 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
Oct 30 PHP
PHP列出MySQL中所有数据库的方法
Mar 12 PHP
php和editplus正则表达式去除空白行
Apr 17 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
Dec 31 PHP
示例详解Laravel的注册重构
Aug 14 PHP
PHP AjaxForm提交图片上传并显示图片源码
Nov 29 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
直流胆(1) PL-365(1) TECSUN(1) YB235(1) 东方红(1) 再生机(1) 德生(17) YB400(2) YB217(1) 1 Tube Radio(1)
You might like
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
PHP_SELF，SCRIPT_NAME，REQUEST_URI区别
2014/12/24 PHP
详解YII关联查询
2016/01/10 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
js实现省级联动（数据结构优化）
2020/07/17 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
python实现电子书翻页小程序
2019/07/23 Python
Django logging配置及使用详解
2019/07/23 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Python实现疫情地图可视化
2021/02/05 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
Melissa香港官网：MDreams
2016/07/01 全球购物
英国游戏机和游戏购物网站：365games.co.uk
2018/06/18 全球购物
初三学生个人自我评定
2014/04/06 职场文书
见习报告的格式
2014/10/31 职场文书
新郎答谢词
2015/01/04 职场文书
2015年工会工作总结
2015/03/30 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript