fileinput上传 全代码包含后台
说明：所提供的代码采用原生servlet+jdbc不用考虑项目兼容性问题（java），考虑到通用性加入了fileinputconfig.properties配置文件，只需要拷贝代码到项目中更改相关配置就可以使用。
1、先来效果图（代码在后面）
初始化
上传前
上传后
2、技术框架：fileinput + servlet+ jdbc
考虑到兼容所有的java框架所以采用了servlet+jdbc作为后台
依赖的js+css
<script type="text/javascript" charset="utf-8" src="../js/jquery-1.12.4.js"></script> <!-- jquery 尽量不要使用太低的版本 --> <script type="text/javascript" charset="utf-8" src="../js/bootstrap.min.js"></script><!-- bootstrap --> <script type="text/javascript" charset="utf-8" src="../js/fileinput.js"></script><!-- fileinput --> <script type="text/javascript" charset="utf-8" src="../js/zh.js"></script><!-- 国际化 汉化js --> <script type="text/javascript" charset="utf-8" src="../js/theme.js"></script><!-- 风格 --> <link type="text/css" href="../css/bootstrap.css" rel="stylesheet"></link> <link type="text/css" href="../css/fileinput.css" rel="stylesheet"></link> <link type="text/css" href="../css/theme.css" rel="stylesheet"></link>
依赖的jar 这里使用的mysql连接jar， 可以根据自己的需要换成其他的。没有测试其他的库有没有问题，如有问题自行解决。
3、上源码（代码皆由本人提供如有雷同纯属巧合）
页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Hello FileInput</title> <style type="text/css"></style> <!-- 插件依赖js --> <script type="text/javascript" charset="utf-8" src="../js/jquery-1.12.4.js"></script> <script type="text/javascript" charset="utf-8" src="../js/bootstrap.min.js"></script> <script type="text/javascript" charset="utf-8" src="../js/fileinput.js"></script> <script type="text/javascript" charset="utf-8" src="../js/zh.js"></script> <script type="text/javascript" charset="utf-8" src="../js/theme.js"></script> <!-- 自己的js --> <script type="text/javascript" charset="utf-8" src="../myjs/my.js"></script> <!-- 插件依赖css --> <link type="text/css" href="../css/bootstrap.css" rel="stylesheet"></link> <link type="text/css" href="../css/fileinput.css" rel="stylesheet"></link> <link type="text/css" href="../css/theme.css" rel="stylesheet"></link> </head> <body> <div style="height: 100%;width: 100%;margin-top: 50px;"> <h1 style="text-align: center;">Hello FileInput</h1> <div> <div style="width: 400px;height: 500px;margin: 0 auto; "> <input type="file" name="upfile" id="upfile" class="file-loading" multiple="multiple"> </div> </div> </div> </body> </html>
js
/** 文件上传js --典型的码农 */ /** 重写后台方法需注意 文件上传后台Servlet 必须返回一个json */ /** * 业务ID此处写死 根据自己业务需求来定义 * */ var bizid = "1001"; /** * 初始化fileinput * **/ var FileInput = function() { var oFile = new Object(); // 初始化fileinput控件（第一次初始化） /** * 入参说明 * ctrlName：控件ID值 * uploadUrl：上传地址 * shwoKey：是否显示上传按钮和上传框 主要用于查看 * imgPathArray：初始化数据path数组 主要用于查看和修改 * imgNameArray：初始化数据name数组 * **/ oFile.Init = function(ctrlName, uploadUrl,shwoKey,imgPathArray,imgNameArray) { var control = $('#' + ctrlName); // 初始化上传控件的样式 control.fileinput({ 'theme': 'explorer', language : 'zh', // 设置语言 uploadUrl : uploadUrl, // 上传的地址 allowedFileExtensions : [ ],// 接收的文件后缀 例[*.jpg,*.png] showPreview:true, overwriteInitial: false, previewFileIcon: '<i class="fa fa-file"></i>', dropZoneEnabled: false,//是否显示拖拽区域 maxFileCount : 2, // 表示允许同时上传的最大文件个数 showUpload:false, //是否显示上传按钮 showRemove : false, //显示移除按钮 showBrowse:shwoKey,//是否显示选择按钮 showCaption:shwoKey,//是否显示选择输入框 enctype : 'multipart/form-data', validateInitialCount : true, previewFileIcon :true,//是否显示文件icon 默认图片是直接显示缩略图 文件会展示相关内容 msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！", preferIconicPreview: true,//是否强制相关文件展示icon initialPreviewAsData: true, previewFileIconSettings: { //配置相关文件展示的icon }, /* uploadExtraData: function(previewId, index) { //额外参数的关键点 }, */ initialPreview:imgPathArray, initialPreviewConfig: imgNameArray, }); } return oFile; }; /** * 插件初始化 * 请求连接 根据实际情况编写 * */ $(function(){ var oFileInput = new FileInput(); oFileInput.Init("upfile", "../fileinput.servlet?cmd=upload&bizid="+bizid,true,new Array(),new Array()); }) /** * 文件上传后调用 * */ $("#upfile").on("fileuploaded", function (event, data, previewId, index) { var obj = data.response; var deleleUrl ="../fileinput.servlet?cmd=delete&bizid="+bizid+"&id="+obj[0].id; //$("#"+previewId).find(".kv-file-remove").attr("data-url",deleleUrl); $("#"+previewId).find(".kv-file-remove").click(function(){ $.ajax({ url : deleleUrl, type : "post", dataType:"json", success : function(result) { //成功操作 }, error : function(result) { //异常操作 } }); }); }); /** * 初始化fileinput数据 用于已上传数据的插件 做编辑 查看使用 * bizid 父ID（业务id/分类id 根据需求自定义）用于批量查出同一类的文件 * 例:项目关联多个图片（文件） 查项目时需要查出所有的图片 那么项目和图片的关系ID作为父ID * */ function initFileInputData(bizid){ var initUrl ="../fileinput.servlet?cmd=initFileInput&bizid="+bizid; $.ajax({ url : initUrl, type : "post", dataType:"json", success : function(result) { //成功操作 var pathArr = new Array();//文件网络地址 集合 var nameArr = new Array();//文件信息集合 $(result).each(function(){ pathArr.push(this.path);//文件访问地址 这里需要网络地址 例：http://localhost:8080/xxx/xx.jpg var obj = new Object(); obj.caption=this.name; obj.size =this.size; obj.url = "../fileinput.servlet?cmd=delete&bizid="+bizid+"&id="+this.id;//用于初始化文件删除事件地址 nameArr.push(obj); }); var oFileInput = new FileInput(); oFileInput.Init("upfile", "../fileinput.servlet?cmd=upload&bizid="+bizid,true,pathArr,nameArr); }, error : function(result) { //异常操作 } }); } function buttonSubmit(){ $("#upfile").fileinput("upload"); }
后台servlet
/** * fileInput */ package com.servlet; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.io.PrintWriter; import java.sql.DriverManager; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Properties; import java.util.UUID; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.apache.commons.io.FileUtils; import com.mysql.jdbc.Connection; import com.mysql.jdbc.PreparedStatement; import com.mysql.jdbc.ResultSet; import net.sf.json.JSONArray; /** * * @author 典型的码农 * @version $Id: FileUploadServlet.java, v 0.1 2017年7月20日 上午10:50:06 */ public class FileUploadServlet extends HttpServlet { private static final long serialVersionUID = -1654876187842392874L; public FileUploadServlet() { super(); } public void destroy() { super.destroy(); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } private Properties pro= new Properties(); /** * 初始化时 获取核心配置文件 * */ public void init() throws ServletException { pro = getUpConfig(); } /** * post 请求 * */ public void doPost(HttpServletRequest request, HttpServletResponse response) { response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); if("upload".equals( request.getParameter("cmd"))){ upload(request,response); }else if("delete".equals( request.getParameter("cmd"))){ delete(request,response); }else if("initFileInput".equals(request.getParameter("cmd"))){ queryFileByPid(request,response); } } /** * 上传 * 注：fileinput 上传每次只上传一个文件 批量上传时会多次请求 * */ private void upload(HttpServletRequest request, HttpServletResponse response){ try { //文件父ID（分类ID，业务ID） String bizid = request.getParameter("bizid"); // 配置上传参数 DiskFileItemFactory factory = new DiskFileItemFactory(); // 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中 factory.setSizeThreshold(Integer.parseInt(pro.getProperty("memory.threshold"))); // 设置临时存储目录 factory.setRepository(new File(System.getProperty("java.io.tmpdir"))); ServletFileUpload upload = new ServletFileUpload(factory); // 设置最大文件上传值 upload.setFileSizeMax(Integer.parseInt(pro.getProperty("file.maxSize"))); // 中文处理 upload.setHeaderEncoding("UTF-8"); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); // 构建文件保存目录 String uploadPath = pro.getProperty("file.uploadDir")+"/"+ sdf.format(new Date()); // 如果目录不存在则创建 File uploadDir = new File(uploadPath); if (!uploadDir.exists()) { uploadDir.mkdir(); } // 解析请求的内容提取文件数据 @SuppressWarnings("unchecked") List<FileItem> formItems = upload.parseRequest(request); String id = ""; if (formItems != null && formItems.size() > 0) { // 迭代表单数据 for (FileItem item : formItems) { // 处理不在表单中的字段 if (!item.isFormField()) { String fileName = new File(item.getName()).getName(); //上传 FileUtils.copyInputStreamToFile(item.getInputStream(),new File(uploadPath,fileName)); //上传后保存 id = saveFileInfo(uploadPath+"/"+fileName,fileName,item.getSize()+"",bizid); } } } ajax(response,id); } catch (Exception e) { e.printStackTrace(); } } /** * 删除文件数据 * **/ private void delete(HttpServletRequest request, HttpServletResponse response){ try { String id = request.getParameter("id"); //删除文件 deleteFile(id); String sql = "delete from "+pro.getProperty("table")+" where "+pro.getProperty("field.id")+"='"+id+"'"; Connection conn = getConn(); PreparedStatement pstmt; pstmt = (PreparedStatement) conn.prepareStatement(sql); pstmt.executeUpdate(); pstmt.close(); conn.close(); } catch (Exception e) { e.printStackTrace(); } } /** * 删除文件 * */ private void deleteFile(String id) throws Exception { String sql = "select * from "+pro.getProperty("table")+" where "+pro.getProperty("field.id")+"='"+id+"'"; Connection conn = getConn(); PreparedStatement pstmt; pstmt = (PreparedStatement) conn.prepareStatement(sql); //注意：此resulSet 来之mysql连接驱动包 跟换驱动时需注意 ResultSet rs = (ResultSet) pstmt.executeQuery(); while(rs.next()){ String filePath = rs.getString("F_PATH"); File file = new File(filePath); file.delete(); } rs.close(); pstmt.close(); conn.close(); } /** * 上传后保存信息入库 * 注：根据实际入参需求 重新此方法 * @param filePath ，fileName ，fileSize * @throws Exception * @return uuid * */ private String saveFileInfo(String filePath,String fileName,String fileSize,String bizid) throws Exception{ UUID uuid = UUID.randomUUID(); String sql = "insert into "+pro.getProperty("table")+"("+pro.getProperty("field.id")+","+pro.getProperty("field.path")+","+pro.getProperty("field.fileName")+","+pro.getProperty("field.size")+","+pro.getProperty("field.bizid")+") values('"+uuid+"','"+filePath+"','"+fileName+"','"+fileSize+"','"+bizid+"')"; Connection conn = getConn(); PreparedStatement pstmt; pstmt = (PreparedStatement) conn.prepareStatement(sql); pstmt.executeUpdate(); pstmt.close(); conn.close(); return uuid.toString(); } /** * 根据父ID查询文件 * */ private void queryFileByPid(HttpServletRequest request, HttpServletResponse response){ try { String bizid = request.getParameter("bizid"); String sql = "select * from "+pro.getProperty("table")+" where "+pro.getProperty("field.bizid")+"='"+bizid+"'"; Connection conn = getConn(); PreparedStatement pstmt; pstmt = (PreparedStatement) conn.prepareStatement(sql); //注意：此resulSet 来之mysql连接驱动包 跟换驱动时需注意 ResultSet rs = (ResultSet) pstmt.executeQuery(); List<Map<String, String>> resultList = new ArrayList<Map<String,String>>(); while(rs.next()){ Map<String, String> map = new HashMap<String, String>(); map.put("id", rs.getString(pro.getProperty("field.id"))); map.put("path", rs.getString(pro.getProperty("field.path"))); map.put("name", rs.getString(pro.getProperty("field.fileName"))); map.put("size", rs.getString(pro.getProperty("field.size"))); resultList.add(map); } rs.close(); pstmt.close(); conn.close(); ajax(response,resultList); } catch (Exception e) { e.printStackTrace(); } } /** * 获取上传附件配置：上传地址、文件大小、数据库配置 * @return Properties * * */ private Properties getUpConfig() { Properties prop = new Properties(); try { // 返回Servlet上下文路径。 String path = this.getServletContext().getRealPath("/"); // 在Servlet上下文路径的最后包含一个"."号，所以这里将它去除。 path = path.substring(0, path.length() - 1); // 我将路径放置在项目下的WEB-INF目录下。 path = path + "\\WEB-INF\\"; // 这里就是我的properties文件。 path = path + "fileUploadConfig.properties"; FileInputStream input = new FileInputStream(path); prop.load(input); } catch (Exception e) { e.printStackTrace(); } return prop; } /**获取jdbc连接*/ private Connection getConn() throws Exception { String driver = pro.getProperty("db.driver"); String url = pro.getProperty("db.url"); String username = pro.getProperty("db.username"); String password = pro.getProperty("db.password"); Connection conn = null; Class.forName(driver); //classLoader,加载对应驱动 conn = (Connection) DriverManager.getConnection(url, username, password); return conn; } /**ajax 返回 注意上传必须返回一个json*/ public void ajax(HttpServletResponse response,String id){ try { response.setContentType("application/json"); response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setCharacterEncoding("UTF-8"); PrintWriter out= null; out = response.getWriter(); Map<String, String> map = new HashMap<String, String>(); map.put("id", id); JSONArray json = JSONArray.fromObject(map); out.print(json); out.flush(); out.close(); } catch (IOException e) { e.printStackTrace(); } } /**ajax 返回 注意上传必须返回一个json*/ public void ajax(HttpServletResponse response,List<Map<String,String>> resultList){ try { response.setContentType("application/json"); response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setCharacterEncoding("UTF-8"); PrintWriter out= null; out = response.getWriter(); JSONArray json = JSONArray.fromObject(resultList); out.print(json); out.flush(); out.close(); } catch (IOException e) { e.printStackTrace(); } } }
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <!-- fileinput 上传Servlet --> <servlet> <servlet-name>FileInputServlet</servlet-name> <!-- 根据项目中此Servlet实际路径编写 --> <servlet-class>com.servlet.FileUploadServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>FileInputServlet</servlet-name> <url-pattern>/fileinput.servlet</url-pattern> </servlet-mapping> </web-app>
核心配置fileinputconfig.properties
##上传路径 file.uploadDir=D:/upload/file ## 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中 单位kb memory.threshold=3145728 ##上传文件大小 单位kb file.maxSize=10485760 ##数据库配置 db.driver=com.mysql.jdbc.Driver db.url=jdbc:mysql://111.11.11.11:3306/plan?useUnicode=true&characterEncoding=utf8 db.username=root db.password=123456 ##数据库表配置 ##表名 table=tbsys_adjunct ##必要字段 值对应数据库字段 ##主键 field.id=F_ID ##文件名称 field.fileName=F_ORI_NAME ##文件大小 field.size=F_FILE_SIZE ##文件地址 field.path=F_PATH ##父id 关系外键（类别id/业务id） field.bizid=F_FID
完整项目源码请点击下载，可下载完整项目或在csdn搜索：fileinput+servlet+jdbc源码
