关于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 ...
随机推荐
- 后缀自动机模板(SPOJ1811)
用后缀自动机实现求两个串的最长公共子串. #include <cstdio> #include <algorithm> ; char s[N]; ]; int main() { ...
- 关于InnoDB的读写锁类型以及加锁方式
(本文为了方便,英文关键词都都采用小写方式,相关知识点会简单介绍,争取做到可以独立阅读) 文章开始我会先介绍本文需要的知识点如下: innodb的聚簇索引(聚集索引)和非聚簇索引(二级索引.非聚集索引 ...
- mac下IDLE无法输入中文的问题
解决方法是下载安装新版本的 Tcl/Tk 下载地址:http://www.activestate.com/activetcl/downloads 注意要下最新的8.5.18.0版本,安装好了再重启ID ...
- 存储单位的换算（KB, MB, GB）
关于存储单位的换算,大家一般会想到下面的换算方法. 1GB=1024MB 1MB=1024KB 1kb=1024字节 但实际生活中,这种换算方法并不准确. 例如在商家生产销售的硬盘, U盘中就不是这样 ...
- Python中set的功能介绍
Set的功能介绍 1.集合的两种函数(方法) 1. 集合的内置函数 交集 格式:x.__and__(y)等同于x&y 例如:s1 = {'a',1,} s2 = {'b',1,} s3 = { ...
- 《Java技术》第三次作业
(一)学习总结 1.阅读下面程序,分析是否能编译通过?如果不能,说明原因.应该如何修改?程序的运行结果是什么?为什么子类的构造方法在运行之前,必须调用父 类的构造方法?能不能反过来? class Gr ...
- 特殊权限 SUID、SGID、Sticky
摘录之----------QuintinX 一. 前提 本篇主要讲解SUID, SGID, Sticky三个权限的基本原理和应用. 为什么要使用特殊权限? 比如系统中假如有超过四类人然而每一类人都需要 ...
- 561. Array Partition I
Given an array of 2n integers, your task is to group these integers into n pairs of integer, say \(( ...
- 异常处理&RandomAccessFile&节奏感
异常处理 异常处理方面的知识,下面是学习中记的笔记: try尝试捕获异常 catch对捕获的异常进行处理 多个catch要注意的问题: 一.顺序问题,先小后大,也就是先子类后父类.因为当异常出现的时候 ...
- SQL Server 虚拟化（1）——虚拟化简介
本文属于SQL Server虚拟化系列 前言: 现代系统中,虚拟化越来越普遍,如果缺乏对虚拟化工作原理的理解,那么DBA在解决性能问题比如降低资源争用.提高备份还原速度等操作时就会出现盲点.所以基于本 ...