tp5怎么办到多图片上传预览？

发布时间：2022-04-07 16:15:49 所属栏目：语言来源：未知

导读：TP5框架怎么实现多图片上传预览？我们在需要上传多图片的时候，如果有上传图片预览操作，那么用户体验感是比较好。这篇文章就给大家分享一下TP5框架实现多图片上传预览的方法，下面我们一起来了解一下。点击选择图片(可选多张)，确定后将选择的图片显示在页

TP5框架怎么实现多图片上传预览？我们在需要上传多图片的时候，如果有上传图片预览操作，那么用户体验感是比较好。这篇文章就给大家分享一下TP5框架实现多图片上传预览的方法，下面我们一起来了解一下。

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

      1、效果图

      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;

      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;

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Tomcat下载和安置	装饰器模式装饰设计模
无用单元采集垃圾回收	Java访问对象的属性和