多文件上传和排列预览，删除

目录

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" %>



	
		
		
		
		
		
	   <%--   --%>
		
		
		
        
		
	    
	
		
	    
	    
	    
	    
	    
	    
		
		
		
		
	
	
	
		

			

			
	
				

					

						

							图片类型：
						
						

							 
							 	
							 		selected
							 		>${type.TYPE_NAME }
							 	
							 
						
						

						  
						   
							 
						   
							 
						   
						 <%--    --%>
						
					
				
			
	
	

	        

	        

	            

	                
	            
	
	        
	        

	
	

		

			

				
					

						

						     
						    

						    	
						    
							
						
					
				
			
		
	
 

    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
	 */
	//这段代码加入tomcat的server.xml中
	public  String queryCustFile(){
		try {
			List 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;i

5、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").on("fileuploaded", function(event, data, previewId, index) { });
filereset
fileclear		点击浏览框右上角X 清空文件前响应事件 $("#fileinput").on("fileclear",function(event, data, msg){ });
filecleared		点击浏览框右上角X 清空文件后响应事件 $("#fileinput").on("filecleared",function(event, data, msg){ });
fileimageuploaded		在预览框中图片已经完全加载完毕后回调的事件