关于bootstrap-fileinput
最近搞了一个很简单的项目,里面需要文件上传。当然文件上传也是很简单的,不过做出成品之后发现,卧槽,火狐和谷歌两个浏览器显示的内容不一致。
如下图,左边的是谷歌显示,右边是火狐显示。
其实,作为一个后台开发人员,功能实现了就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
关于bootstrap-fileinput的更多相关文章
- JS组件系列——Bootstrap文件上传组件：bootstrap fileinput
前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...
- bootstrap fileinput添加上传成功回调事件
国外牛人做的bootstrap fileinput挺酷的,但是可惜没有提供自定义上传成功回调事件的接口,因此感到非常头疼,但是很幸运的是,我在网上搜索到一个提问帖子,它问到使用Jquery的on函数绑 ...
- 结合bootstrap fileinput插件和Bootstrap-table表格插件，实现文件上传、预览、提交的导入Excel数据操作流程
1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...
- bootstrap fileinput 使用记录
第一次使用bootstrap fileinput碰到了许多坑,做下记录 需求 本次使用bootstrap fileinput文件上传组件,主要用来上传和预览图片.作为一个后台管理功能,为某个表的某个字 ...
- 关于Bootstrap fileinput 上传新文件，移除时触发服务器同步删除的配置
在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 来同步删除服务器 ...
- BootStrap fileinput.js文件上传组件实例代码
1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...
- Bootstrap fileinput.js，最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
- JS文件上传神器bootstrap fileinput详解
Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...
- ***Bootstrap FileInput插件的使用经验汇总
插件下载地址: https://github.com/kartik-v/bootstrap-fileinput/ 官方DEMO查看: http://plugins.krajee.com/file-ba ...
- bootstrap fileinput插件使用感悟
bootstrap fileinput 的填坑感悟 这个插件在demo的网站地址http://plugins.krajee.com/file-preview-icons-de ...
随机推荐
- JS 实现点击页面任意位置隐藏div、span
通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...
- java海量大文件数据处理方式
1. 给定a.b两个文件,各存放50亿个url,每个url各占64字节,内存限制是4G,让你找出a.b文件共同的url? 方案1:可以估计每个文件安的大小为50G×64=320G,远远大于内存限制的4 ...
- hasattr(),getattr(),setattr()的使用
# 首先你有一个command.py文件,内容如下,这里我们假若它后面还有100个方法 class MyObject(object): def __init__(self): self.x = def ...
- （一）python基础知识
Python:解释型语言(一边翻译一边运行)注释:单行注释(#).多行注释(ctrl+/):''' '''和""" """ (python2 ...
- 2-学习GPRS_Air202(Air202开发板介绍和下载第一个程序)
http://www.cnblogs.com/yangfengwu/p/8887933.html 资料链接 链接:https://pan.baidu.com/s/1968t2QITuxoyXlE_Nz ...
- PHP 完整表单实例
PHP - 在表单中确保输入值 在用户点击提交按钮后,为确保字段值是否输入正确,我们在HTML的input元素中插添加PHP脚本, 各字段名为: name, email, 和 website. 在评论 ...
- PHP 5 Array 函数
PHP Array 简介 PHP Array 函数允许您访问并操作数组. 支持简单的数组和多维数组. 安装 PHP Array 函数是 PHP 核心的组成部分.无需安装即可使用这些函数. PHP 5 ...
- Zookeeper命令行操作(常用命令；客户端连接；查看znode路径；创建节点；获取znode数据，查看节点内容，设置节点内容，删除节点；监听znode事件；telnet连接zookeeper)
8.1.常用命令 启动ZK服务 bin/zkServer.sh start 查看ZK服务状态 bin/zkServer.sh status 停止ZK服务 bin/zkServer.sh stop 重启 ...
- Java集合框架总结
java集合框架主要分为实现了Collection接口的List和Set.映射接口Map. |-- List 有序,元素都有索引,可重复. |-- Set 无序,不可以存储重复的元素. |-- Map ...
- 微信小程序基础之常用控件text、icon、progress、button、navigator
今天展示一下基础控件的学习开发,希望对大家有所帮助,转载请说明~ 首先延续之前的首页界面展示,几个跳转navigator的使用,然后是各功能模块的功能使用 一.text展示 使用按钮,进行文字的添加与 ...