Bootstrap Fileupload 文件上传-优快云博客

本文详细介绍如何在JSP中引入CSS与JS文件，初始化文件上传控件，并通过示例展示了如何设置上传文件的类型限制、语言选项及上传路径。同时，文章提供了在Controller中处理上传文件的具体方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

    <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();

转载于:https://www.cnblogs.com/feixian/p/5960090.html