多文件上传和排列预览，删除
目录
1、网页效果图
2、jar包
3、网页代码
4、java代码
（1）用的是Struts2的action，其中有对数据库的插入删除
（2）bean类
（3）文件上传，下载的工具类
5、strut2的xml中下载的配置
6、bootstrap-fileinput的一些参数
1、网页效果图
2、jar包
文件上传的jar包为 bootstrap-fileinput-master，图片展示的jar包为 jquerySinlar，下载地址https://download.csdn.net/download/qq_27339781/10785735
3、网页代码
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%@include file="/jpascommon/taglibs.jsp"%>
<%@taglib uri="/struts-tags" prefix="s" %>
blank
<%-- --%>
-
4、java代码
（1）用的是Struts2的action，其中有对数据库的插入删除
public class CustFileAction extends BaseStruts2Action {
private static final long serialVersionUID = 1L;
protected final transient Logger log = LoggerFactory.getLogger(getClass());
private CustFileBean custFileBean;
private List file ;
private List fileFileName ;
private String downFileName;
private InputStream fileInputStream;
CustFileService custFileService = new CustFileServiceImpl();
/**
* 上传文件
* @return
*/
public void insertCustFile(){
Connection con = null;
boolean abortTransaction = false;
JsonResult json = null;
try {
json = new JsonResult();
custFileBean.setMan(getLoginUser().getId());
custFileBean.setTime(DateUtil.yyyyMMddHH_MM_SS(new Date()));
con = DbConnectionManager.getTransactionConnection();
String filePath = CrmConstrants.custPicPath+File.separator+custFileBean.getCustId()+File.separator+custFileBean.getType();
custFileBean.setName(file2FileName);
custFileService.insertCustFile(con, custFileBean);
FileUtils.uploadFile(filePath, file2, file2FileName);
json.setSuccAndMsg(true, "上传文件成功！");
} catch (Exception e) {
e.printStackTrace();
abortTransaction = true;
log.error("插入客户图片错误", e);
json.setSuccAndMsg(false, "上传文件失败！");
}finally{
DbConnectionManager.closeTransactionConnection(con, abortTransaction);
}
writeJson(json);
}
/**
* 查询已有文件
* @return
*/
// fileList = custFileService.queryCustFileList(custFileBean);
List> picList = new ArrayList>();
for (int i = 0; i < fileList.size(); i++) {
String url = "/custPicDir"+File.separator+custFileBean.getCustId()+File.separator+fileList.get(i).getType()+File.separator+fileList.get(i).getName();
Map map = new HashMap();
map.put("url", url);
map.put("id", fileList.get(i).getId());
picList.add(map);
}
List> typeList=FileUtils.getTypeList("804");
request.setAttribute("typeList", typeList);
request.setAttribute("picList", picList);
} catch (SQLException e) {
e.printStackTrace();
log.error("查询客户图片错误", e);
}
return "custFile";
}
/**
* 删除文件
* @return
*/
public String deleteFile(){
Connection con = null;
boolean abortTransaction = false;
try {
con = DbConnectionManager.getTransactionConnection();
CustFileBean custFileBean2 = custFileService.queryCustFileList(custFileBean).get(0);
String url = CrmConstrants.custPicPath+File.separator+custFileBean2.getCustId()+File.separator+custFileBean2.getType()+File.separator+custFileBean2.getName();
if(custFileService.deleteCustFile(con, custFileBean2)>0){
FileUtils.delete(url);
}
custFileBean.setId(null);
custFileBean.setCustId(custFileBean2.getCustId());
custFileBean.setType(custFileBean2.getType());
} catch (Exception e) {
e.printStackTrace();
abortTransaction = true;
log.error("删除客户图片错误", e);
return ERROR;
}finally{
DbConnectionManager.closeTransactionConnection(con, abortTransaction);
}
return queryCustFile();
}
/**
* 下载单个文件
* @return
*/
public String downLoad(){
try {
String downFileName2 =CrmConstrants.custPicPath+File.separator+custFileBean.getCustId()+File.separator+custFileBean.getType()+File.separator+custFileBean.getName();
downFileName=URLEncoder.encode(custFileBean.getName(), "UTF-8");
fileInputStream = new FileInputStream(downFileName2);
} catch (Exception e) {
e.printStackTrace();
log.error("下载客户图片错误", e);
}
return "downLoad";
}
/**
* 下载zip文件
* @return
*/
public String downZipLoad(){
try {
String downFileName2 =CrmConstrants.custPicPath+File.separator+custFileBean.getCustId()+File.separator+custFileBean.getType()+".zip";
FileUtils.fileToZip(CrmConstrants.custPicPath+File.separator+custFileBean.getCustId()+File.separator+custFileBean.getType(), CrmConstrants.custPicPath+File.separator+custFileBean.getCustId(), custFileBean.getType());
String name = FileUtils.getTypeMap("804").get(custFileBean.getType())+"";
downFileName=URLEncoder.encode(name+"附件"+".zip", "UTF-8");
fileInputStream = new FileInputStream(downFileName2);
} catch (Exception e) {
e.printStackTrace();
log.error("下载客户图片压缩包错误", e);
}
return "downZipLoad";
}
public String getDownFileName() {
return downFileName;
}
public void setDownFileName(String downFileName) {
this.downFileName = downFileName;
}
public InputStream getFileInputStream() {
return fileInputStream;
}
public void setFileInputStream(InputStream fileInputStream) {
this.fileInputStream = fileInputStream;
}
public CustFileBean getCustFileBean() {
return custFileBean;
}
public void setCustFileBean(CustFileBean custFileBean) {
this.custFileBean = custFileBean;
}
public List getFile() {
return file;
}
public void setFile(List file) {
this.file = file;
}
public List getFileFileName() {
return fileFileName;
}
public void setFileFileName(List fileFileName) {
this.fileFileName = fileFileName;
}
｝ （2）bean类
public class CustFileBean implements Serializable{
/**
*
*/
private static final long serialVersionUID = 1L;
private String id;
private String custId;
private String time;
private String type;
private String man;
private String name;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getCustId() {
return custId;
}
public void setCustId(String custId) {
this.custId = custId;
}
public String getTime() {
return time;
}
public void setTime(String time) {
this.time = time;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public String getMan() {
return man;
}
public void setMan(String man) {
this.man = man;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
（3）文件上传，下载的工具类
public class FileUtils {
/**
* 将存放在sourceFilePath目录下的源文件，打包成fileName名称的zip文件，并存放到zipFilePath路径下
* @param sourceFilePath :待压缩的文件路径
* @param zipFilePath :压缩后存放路径
* @param fileName :压缩后文件的名称
* @return
*/
public static void fileToZip(String sourceFilePath,String zipFilePath,String fileName){
// boolean flag = false;
File sourceFile = new File(sourceFilePath);
FileInputStream fis = null;
BufferedInputStream bis = null;
FileOutputStream fos = null;
ZipOutputStream zos = null;
if(sourceFile.exists() == false){
System.out.println("待压缩的文件目录："+sourceFilePath+"不存在.");
sourceFile.mkdir(); // 新建目录
}
try {
File zipFile = new File(zipFilePath + File.separator + fileName +".zip");
if(zipFile.exists()){
delete(zipFilePath + File.separator + fileName +".zip");
}
//System.out.println(zipFilePath + "目录下存在名字为:" + fileName +".zip" +"打包文件.");
File[] sourceFiles = sourceFile.listFiles();
if(null == sourceFiles || sourceFiles.length<1){
System.out.println("待压缩的文件目录：" + sourceFilePath + "里面不存在文件，无需压缩.");
}else{
fos = new FileOutputStream(zipFile);
zos = new ZipOutputStream(new BufferedOutputStream(fos));
byte[] bufs = new byte[1024*10];
for(int i=0;i5、strut2的xml中下载的配置
application/octet-stream
attachment;fileName="${downFileName}"
fileInputStream
application/octet-stream
attachment;fileName="${downFileName}"
fileInputStream
/pages/crmPersonal/custFile.jsp
6、bootstrap-fileinput的一些参数
属性
| 属性名 |
属性类型 |
描述说明 |
默认值 |
| language |
String |
多语言设置，使用时需提前引入\locales文件夹下对应的语言文件，中文zh，引入语言文件必须放在fileinput.js之后 |
'en' |
| showCaption |
Boolean |
是否显示被选文件的简介 |
true |
| showBrowse |
Boolean |
是否显示浏览按钮 |
true |
| showPreview |
Boolean |
是否显示预览区域 |
true |
| showRemove |
Boolean |
是否显示移除按钮 |
true, |
| showUpload |
Boolean |
是否显示上传按钮 |
true, |
| showCancel |
Boolean |
是否显示取消按钮 |
true, |
| showClose: |
Boolean |
是否显示关闭按钮 |
true |
| autoReplace |
Boolean |
是否自动替换当前图片，设置为true时，再次选择文件，会将当前的文件替换掉。 |
false |
| previewClass |
String |
添加预览按钮的类属性 |
‘’ |
| deleteUrl |
String |
删除图片时的请求路径 |
'' |
| deleteExtraData |
Object |
删除图片时额外传入的参数 |
|
| allowedFileTypes |
Object |
接收的文件后缀，如['jpg', 'gif', 'png'],不填将不限制上传文件后缀类型 |
null |
| uploadUrl |
String |
上传文件路径 |
null |
| uploadAsync |
boolean |
是否为异步上传，一张一张的传，如果为多张就为同步 |
true |
| uploadExtraData |
|
上传文件时额外传递的参数设置 |
{} |
| minImageWidth |
String |
图片的最小宽度 |
null |
| minImageHeight |
String |
图片的最小高度 |
null |
| maxImageWidth |
String |
图片的最大宽度 |
null |
| maxImageHeight |
String |
图片的最大高度 |
null |
| minFileSize |
number |
单位为kb，上传文件的最小大小值 |
0 |
| maxFileSize |
number |
单位为kb，如果为0表示不限制文件大小 |
0 |
| resizeDefaultImageType |
number |
调整默认图像类型 |
25600(25MB) |
| minFileCount |
number |
表示同时最小上传的文件个数 |
0 |
| maxFileCount |
number |
表示允许同时上传的最大文件个数 |
0 |
| validateInitialCount |
boolean |
验证初始计数 |
false |
| previewFileType |
String |
预览文件类型,内置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式 |
'image |
| elCaptionText |
String |
设置标题栏提示信息 |
null |
| dropZoneEnabled |
boolean |
是否显示拖拽区域 |
true |
| dropZoneTitleClass |
String |
拖拽区域类属性设置 |
'file-drop-zone-title' |
| textEncoding |
String |
编码设置 |
'UTF-8' |
方法
| 方法名 |
参数 |
描述 |
| fileerror |
|
异步上传错误结果处理 $('#uploadfile').on('fileerror', function(event, data, msg) { }); |
| fileuploaded |
|
异步上传成功结果处理 $("#uploadfile").on("fileuploaded", function (event, data, previewId, index) { }) |
| filebatchuploaderror |
|
同步上传错误结果处理 $('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {
}); |
| filebatchuploadsuccess |
|
同步上传成功结果处理 $('#uploadfile').on('filebatchuploadsuccess', function(event, data, previewId, index) {
}); |
| filebatchselected |
|
选择文件后处理事件 $("#fileinput").on("filebatchselected", function(event, files) { }); |
| upload |
|
文件上传方法 $("#fileinput").fileinput("upload"); |
| fileuploaded |
|
上传成功后处理方法 $("#fileinput").
|
| filereset |
|
|
| fileclear |
|
点击浏览框右上角X 清空文件前响应事件 $("#fileinput").on("fileclear",function(event, data, msg){ }); |
| filecleared |
|
点击浏览框右上角X 清空文件后响应事件 $("#fileinput").on("filecleared",function(event, data, msg){ }); |
| fileimageuploaded |
|
在预览框中图片已经完全加载完毕后回调的事件 |