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();
    }
  • 相关阅读:
    获取windows所有用户名
    windbg内存查看(d*)
    Windbg查看调用堆栈(k*)
    Windbg调试互斥体(Mutex)死锁
    Windbg调试关键区(CriticalSection)死锁
    "R6002 floating point support not loaded"错误
    由可变参数引起的崩溃
    【Dubbo源码学习】负载均衡算法(2)-轮询算法的实现
    jdk1.8源码解析(1):HashMap源码解析
    Java annotation浅析
  • 原文地址:https://www.cnblogs.com/feixian/p/5960090.html
Copyright © 2011-2022 走看看