bootstrap-fileinput-master文件上传

bootstrap-fileinput-master文件上传

本人也是初学者，记录记录自己使用bootstrap-fileinput-master使用方法和心得。

第一步：
导入js和css

<link
	href="${pageContext.request.contextPath }/bootstrap-fileinput-master/css/fileinput.css"
	media="all" rel="stylesheet" type="text/css" />
<link
	href="${pageContext.request.contextPath }/bootstrap-fileinput-master/themes/explorer-fas/theme.css"
	media="all" rel="stylesheet" type="text/css" />
<script
		src="${pageContext.request.contextPath }/bootstrap-fileinput-master/js/plugins/sortable.js"
		type="text/javascript"></script>
	<script
		src="${pageContext.request.contextPath }/bootstrap-fileinput-master/js/fileinput.js"
		type="text/javascript"></script>
	<script
		src="${pageContext.request.contextPath }/bootstrap-fileinput-master/js/locales/zh.js"
		type="text/javascript"></script>
	<script
		src="${pageContext.request.contextPath }/bootstrap-fileinput-master/themes/fas/theme.js"
		type="text/javascript"></script>
	<script
		src="${pageContext.request.contextPath }/bootstrap-fileinput-master/themes/explorer-fas/theme.js"
		type="text/javascript"></script>

第二步：
html页面

	<form enctype="multipart/form-data" id="form" action="upload/insert"
		method="post" enctype="multipart/form-data">
		<div class="form-group">
			<input id="fileInput" name="file" multiple type="file"
				class="file-loading" data-show-caption="true" />
		</div>
	</form>

初始化一下bootstrap

<script type="text/javascript">
		$("#fileInput").fileinput({

							language : 'zh', //设置语言

							uploadUrl : "${pageContext.request.contextPath }/invoiceSticker/upload/insert", //上传的地址

							allowedFileExtensions : [ 'pdf' ],//接收的文件后缀

							//uploadExtraData:{"id": 1, "fileName":'123.mp3'},

							uploadAsync : true, //默认异步上传

							showUpload : true, //是否显示上传按钮

							showRemove : true, //显示移除按钮

							showPreview : true, //是否显示预览

							showCaption : false,//是否显示标题

							browseClass : "btn btn-primary", //按钮样式    

							dropZoneEnabled : true,//是否显示拖拽区域

							//minImageWidth: 50, //图片的最小宽度

							//minImageHeight: 50,//图片的最小高度

							//maxImageWidth: 1000,//图片的最大宽度

							//maxImageHeight: 1000,//图片的最大高度

							//maxFileSize:0,//单位为kb，如果为0表示不限制文件大小

							//minFileCount: 0,

							maxFileCount : 6, //表示允许同时上传的最大文件个数

							enctype : 'multipart/form-data',

							validateInitialCount : true,

							previewFileIcon : "<iclass='glyphicon glyphicon-king'></i>",

							msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
							//预览框中按钮  ''代表去掉
							layoutTemplates:{
								actionUpload:'',
								actionDelete:''
							}
						}).on('filepreupload', function(event, data, previewId, index) { //执行完成的回调函数


				        })
			
	</script>

本来想粘贴一个效果的，奈何本人初写这些，不是很懂。大家将就着看看吧，有什么不足的地方，欢迎大家指正，互相学习。

Java后端接收，本人写的比较简单，大神勿喷。

@ResponseBody
	@RequestMapping("/upload/insert")
	public String topdfuploadinsert(HttpServletRequest request, HttpServletResponse response,
			@RequestParam("file") MultipartFile[] file,@CurrentUser SysUser loginUser) throws IOException {

		if (file != null && file.length > 0) {
	
			List<String> fileName = new ArrayList<String>();
			Filepdf filepdf=new Filepdf();
			try {
				for (int i = 0; i < file.length; i++) {
					if (!file[i].isEmpty()) {
						// 上传文件，随机名称，";"分号隔开
						String pdfname = uploadpdf(request, file[i], true);//此方法执行完成返回文件名
						boolean bag = fileName.add(pdfname);
						//插入数据库
						if(bag) {
							int count = dnvFilepdfService.insertFilepdf(filepdf);
						}
						
					}
				}

			} catch (Exception e) {

			}
		} else {

		}
		return "true";//一定要返回json数据
	}

以上便是全部啦，如果有人需要的话，我再把代码补齐咯，暂时先这样啦。