您的位置：首页 > Web前端 > BootStrap

关于bootstrap-fileinput

2016-04-08 10:44 531 查看

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

如下图,左边的是谷歌显示,右边是火狐显示。

其实,作为一个后台开发人员,功能实现了就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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航