bootstrap文件上传fileupload插件
Bootstrap FileInput中文API整理：https://blog.csdn.net/u012526194/article/details/69937741
SpringMVC + bootstrap fileupload 多文件上传：https://blog.csdn.net/fanxiangru999/article/details/61927385
bootstrap fileupload 使用详解：https://blog.csdn.net/fanxiangru999/article/details/63756730
源码以及API地址：
bootstrap-fileinput源码：https://github.com/kartik-v/bootstrap-fileinput
bootstrap-fileinput在线API：http://plugins.krajee.com/file-input
bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo
前后端单文件上传代码：
@ResponseBody
@RequestMapping(value="/upload", method = RequestMethod.POST)
public JSONObject upload(@RequestParam("file") MultipartFile file, HttpServletRequest request ) {
System.out.println("上传开始");
JSONObject json = new JSONObject();
json.put("code", "1");
if( file.isEmpty() ) {
json.put("msg", "上传文件为空");
return json;
}else {
String savePath = request.getServletContext().getRealPath("/upload/");
String fileName=file.getOriginalFilename();
String pathname = savePath + fileName;
File dest = new File(pathname);
if( !dest.getParentFile().exists() ) {
dest.getParentFile().mkdirs();
}
try {
file.transferTo(dest);
json.put("code", 1);
json.put("msg", "上传成功");
json.put("imgPath", pathname);
return json;
} catch (Exception e) {
json.put("msg", e.getMessage());
return json;
}
}
}<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran -->
<html >
<head>
<meta charset="UTF-8"/>
<title>上传文件测试</title>
<link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">
<link href="<%=basePath%>css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="<%=basePath%>js/jquery-3.2.1.min.js"></script>
<script src="<%=basePath%>js/fileinput.min.js" type="text/javascript"></script>
<script src="<%=basePath%>js/fileinput_locale_zh.js" type="text/javascript"></script>
<script src="<%=basePath%>js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="row" >
<input class="file" type="file" multiple data-min-file-count="1" name="file">
</div>
</div>
<script type="text/javascript">
//初始化fileinput控件（第一次初始化）
function initFileInput(ctrlName, uploadUrl) {
var control = $(\'#\' + ctrlName);
control.fileinput({
language: \'zh\', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions : [\'jpg\', \'png\',\'gif\'],//接收的文件后缀
showUpload: true, //是否显示上传按钮
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
previewFileIcon: "<i class=\'glyphicon glyphicon-king\'></i>",
});
}
//初始化fileinput控件（第一次初始化）
initFileInput("file-0", "/upload");
</script>
</body>
</html>相关推荐
一款基于bootstrap的文件上传插件，现在很多手机webapp都在用
官网：http://plugins.krajee.com/file-input
时间：2023-11-09 03:52
