zoukankan      html  css  js  c++  java
  • 初始化bootstrap-fileinput 组件

    1. function showPhotos(djson){
      //后台返回json字符串转换为json对象
      var reData = eval(djson);
      // 预览图片json数据组
      var preList = new Array();
      for ( var i = 0; i < reData.length; i++) {
      var array_element = reData[i];
      // 此处指针对.txt判断,其余自行添加
      if(array_element.fileIdFile.name.indexOf("txt")>0){
      // 非图片类型的展示
      preList[i]= "<div class='file-preview-other-frame'><div class='file-preview-other'><span class='file-icon-4x'><i class='fa fa-file-text-o text-info'></i></span></div></div>"
      }else{
      // 图片类型
      preList[i]= "<img src="/eim/upload/getIMG.do?savePath="+array_element.fileIdFile.filePath+"&name="+array_element.fileIdFile.name+"" class="file-preview-image">";
      }
      }
      var previewJson = preList;
      // 与上面 预览图片json数据组 对应的config数据
      var preConfigList = new Array();
      for ( var i = 0; i < reData.length; i++) {
      var array_element = reData[i];
      var tjson = {caption: array_element.fileIdFile.fileName, // 展示的文件名
      '120px',
      url: '/eim/project/deleteFile.do', // 删除url
      key: array_element.id, // 删除是Ajax向后台传递的参数
      extra: {id: 100}
      };
      preConfigList[i] = tjson;
      }
      // 具体参数自行查询
      $('#testlogo').fileinput({
      uploadUrl: '/eim/upload/uploadFile.do',
      uploadAsync:true,
      showCaption: true,
      showUpload: true,//是否显示上传按钮
      showRemove: false,//是否显示删除按钮
      showCaption: true,//是否显示输入框
      showPreview:true,
      showCancel:true,
      dropZoneEnabled: false,
      maxFileCount: 10,
      initialPreviewShowDelete:true,
      msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值!",
      initialPreview: previewJson,
      previewFileIcon: '<i class="fa fa-file"></i>',
      allowedPreviewTypes: ['image'],
      previewFileIconSettings: {
      'docx': '<i class="fa fa-file-word-o text-primary"></i>',
      'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',
      'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
      'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
      'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
      'sql': '<i class="fa fa-file-word-o text-primary"></i>',
      },
      initialPreviewConfig: preConfigList
      }).off('filepreupload').on('filepreupload', function() {
      // alert(data.url);
      }).on("fileuploaded", function(event, outData) {
      //文件上传成功后返回的数据, 此处我只保存返回文件的id
      var result = outData.response.id;
      // 对应的input 赋值
      $('#htestlogo').val(result).change();
      });
      }

  • 相关阅读:
    PyQt5--基础篇:用eric6工具实现三级联动效果
    Django--基本篇:项目结构与设计模式(MVC)
    python文件最基础的读写删除
    Begin using git (Part1)
    Begin using git
    通用刷新数据源代码
    Combox程序中自定义数据源
    表内父子关系的递归查询
    C++ 获取数组长度
    Linux在终端里面切换root用户
  • 原文地址:https://www.cnblogs.com/itadong/p/7145715.html
Copyright © 2011-2022 走看看