关于bootstrap-fileinput

最新推荐文章于 2024-05-09 14:51:32 发布

程序员小董

最新推荐文章于 2024-05-09 14:51:32 发布

阅读量1.7w

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/dlf123321/article/details/51094402

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

最近搞了一个很简单的项目,里面需要文件上传。当然文件上传也是很简单的,不过做出成品之后发现,卧槽,火狐和谷歌两个浏览器显示的内容不一致。
如下图,左边的是谷歌显示,右边是火狐显示。

其实,作为一个后台开发人员,功能实现了就OK了。不过,咱们还是得精益求精不是。向我理工大的崔老师致敬。
百度了一下,发现bootstrap fileinput这个组件不错。

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

OK下载来看一下,文件夹内容如下,大家看看sample里面的就OK。

这是我改动的一个例子,大家看一下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">


<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css" />


<script src="js/jquery-1.11.2.js"></script>
<script src="js/fileinput.min.js" type="text/javascript"></script>
<script src="js/fileinput_locale_zh.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>


</head>


<body>
	<div class="container kv-main" style=" width: 830px;height: 400px;margin-top: 200px;">


		<form enctype="multipart/form-data">
			<input id="file-1" class="file" type="file" multiple
				data-min-file-count="1"> <br>
		</form>


		<hr>


		<hr>
		<br>
	</div>
</body>
</html>
<script>
    
    $("#file-1").fileinput({ 
    	language: 'zh',
        uploadUrl: 'upload', // you must set a valid URL here else you will get an error
        allowedFileExtensions : ['xls','jpg', 'png','gif'],
        maxFileCount: 3,   //同时最多上传3个文件
        //allowedFileTypes: ['image', 'video', 'flash'],  这是允许的文件类型 跟上面的后缀名还不是一回事
        //这是文件名替换
	slugCallback: function(filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
	}); 
          //这是提交完成后的回调函数  
	 $("#file-1").on("fileuploaded", function (event, data, previewId, index) {
		 top.location.href="processor.jsp";
	 });
</script>

我们再看看后台的处理逻辑

下面的代码导入的包是:org.apache.commons.fileupload,别倒成org.apache.tomcat.util.http.fileupload

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		File file1 = null;
		response.setCharacterEncoding("UTF-8");
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html");
		
		 DiskFileItemFactory factory = new DiskFileItemFactory();
                  ServletFileUpload upload = new ServletFileUpload(factory);
		try {
			List<FileItem> list = upload.parseRequest(request); //解析request请求
			
			for (FileItem fileItem : list) {
				System.out.println(fileItem.getFieldName());
				if (fileItem.getFieldName().equals("file_data")) {
					file1 = new File(getServletContext().getRealPath("attachment"), "myfile.xls");
					file1.getParentFile().mkdirs();
					file1.createNewFile();
                                        System.out.println(fileItem.getName()+" psd");
					InputStream ins = fileItem.getInputStream();
					OutputStream ous = new FileOutputStream(file1);
					try {
						byte[] buffer = new byte[1024];
						int len = 0;
						while ((len = ins.read(buffer)) > -1)
							ous.write(buffer, 0, len);
					} finally {
						ous.close();
						ins.close();
					}
				}


			}
		} catch (FileUploadException e) {
			e.printStackTrace();
		}
		


		 JSONObject jsonObject = new JSONObject();  
		 jsonObject.put("result", "ok");
		 response.getWriter().write(jsonObject.toString());
	}

处理完成后,必须返回一个json数据,否则会报如下的错误

大家还有不清楚的,在下面回复吧。

参考资料
JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用

http://stackoverflow.com/questions/30939225/bootstrap-file-input-jquery-plugin-designed-by-krajee-syntaxerror-unexpected-e

程序员小董

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
33
评论
关于bootstrap-fileinput

最近搞了一个很简单的项目,里面需要文件上传。当然文件上传也是很简单的,不过做出成品之后发现,卧槽,火狐和谷歌两个浏览器显示的内容不一致。如下图,左边的是谷歌显示,右边是火狐显示。其实,作为一个后台开发人员,功能实现了就OK了。不过,咱们还是得精益求精不是。向我理工大的崔老师致敬。百度了一下,发现bootstrap fileinput这个组件不错。bootstrap-
复制链接

扫一扫