zoukankan      html  css  js  c++  java
  • Bootstrap Fileupload 文件上传

    1.在jsp中引入css与js文件,

      <link href="${ctx}/plugins/fileup/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>----css
      <script type="text/javascript" src="${ctx}/plugins/fileup/js/fileinput.js"/>----js
      <script src="${ctx}/plugins/fileup/js/fileinput_locale_th.js" type="text/javascript"></script>----
      <script src="${ctx}/plugins/fileup/js/fileinput_locale_zh.js" type="text/javascript"></script>----字体

    2.在jsp中初始化文件上传控件:

    $(document).ready(function(){
    /* 输入框联想 */
    new CommunitySelect('searchCommunityName','${ctx}');
    $('#table').bootstrapTable({
    method:'post'
    });

    $("#edit").on("hidden.bs.modal", function(){
    $(this).removeData("bs.modal");
    });
    //文件上传
    $('#file-zh').fileinput({
    language: 'zh',
    maxFilesNum: 1,
    maxFileSize: 5000,
    uploadUrl: '${ctx}/mindex/importCityIndex.do', //请求的路径  

    showUpload: true,

    showRemove: true,
    uploadAsync: true,
    showPreview : true,
    showCancel : false,
    allowedFileExtensions: ['xlsx', 'xls']    //限定文件的类型
    });
    });

    $("#file-zh").on("fileuploaded", function(event, data, previewId, index) {
    var result = data.response;
    if (result.success) {
    $("#uploadModal").modal("hide");
    $('#table').bootstrapTable("refresh");
    bootbox.alert(result.msg);
    } else {
    bootbox.alert(result.msg);
    }
    });

    3.在jsp中主体部分添加弹出窗体

    //上传的按钮

    <a href="#uploadModal" class="btn bg-blue" data-toggle="modal" data-preview-file-type="lsx/xlsx"><i
    class="fa fa-download"></i> 上传</a>

    <div class="modal fade" id="uploadModal" tabindex="-1" role="basic" aria-hidden="true">

        <form enctype="multipart/form-data" id="uploadForm" method="post">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
    aria-hidden="true"></button>
    <h4 class="modal-title">导入</h4>

    <div class="modal-body">
    <div class="form-group">
    <input id="file-zh" name="xlsFile" type="file" multiple>
    </div>
    </div>
    </div>
    </div>
    </div>
    </form>
    </div>


    4、在controller中添加handler
    @RequestMapping("importCityIndex")
    @ResponseBody
    public AjaxJson importCommunity(@RequestParam("xlsFile") MultipartFile file) throws IOException{
      //file 得到要上传文件的输入流对象
      
    InputStream inputStream = file.getInputStream();
    }
  • 相关阅读:
    字符串 CSV解析 表格 逗号分隔值 通讯录 电话簿 MD
    Context Application 使用总结 MD
    RxJava RxPermissions 动态权限 简介 原理 案例 MD
    Luban 鲁班 图片压缩 MD
    FileProvider N 7.0 升级 安装APK 选择文件 拍照 临时权限 MD
    组件化 得到 DDComponent JIMU 模块 插件 MD
    gradlew 命令行 build 调试 构建错误 Manifest merger failed MD
    protobuf Protocol Buffers 简介 案例 MD
    ORM数据库框架 SQLite 常用数据库框架比较 MD
    [工具配置]requirejs 多页面,多入口js文件打包总结
  • 原文地址:https://www.cnblogs.com/feixian/p/5960090.html
Copyright © 2011-2022 走看看