基于jQuery上传文件插件

由于最近项目的需求,需要做一个上传文件的插件,支持上传，下载，删除等功能,该插件主要运用了jQuery与jqgrid以及easyui，先贴出主要代码

/**
 * 上传附件插件--uploadFile
 * 调用示例：
 * 	$("#commonUploadBtn").click(function(){
		    $("#commonUpload").uploadFile({
		    	businessType:"身份甄别",--业务类别
		    	businessID:"2",--业务id
		    	filePath:"test",--上传文件的路径
		  	 });
   参数说明：
   1.businessType 业务类型,对应到数据字典中
   2.businessID 业务id 对应数据字典中的code
   3.filePath 上传文件的路径,这个需要实现定义好规范,在程序中添加dir
 */
(function ($) {
    $.fn.extend({
    	uploadFile:function(options){
    	 //生成随机数,用来设置image标签的id
          var fileRandom = Math.floor(Math.random()*100000+1);
          //初始化内部默认参数
           var customParmas = {
       		    gridID:"g_"+fileRandom,//上传文件表格ID
       		    formID:"form_"+fileRandom,//表单ID
       		    pager: "pager_"+fileRandom,//分页ID
       		    textfield_fj:"text_"+fileRandom,
       		    currentTag : this,//当前标签对象
       		    uploadForm:"uploadForm_"+fileRandom
           };
    		//默认参数
    		var defaultsParams = {
    			upload_url:contextPath + "/uploadAttachment/uploadFile",//上传文件的URL
    			del_url:contextPath + "/uploadAttachment",//删除文件URL
    			list_url:contextPath + "/uploadAttachment",//查询列表的URL
    			down_url:contextPath + "/uploadAttachment/download",//下载
    		    sortname:"createDate",//排序字段,默认:createDate
    		    sord: "desc",//排序类型：升序，降序 ,默认降序
    		};
    		
     	    //装载默然参数和传人的参数对象
            var options = $.extend(defaultsParams, options); 
            
            
    		//渲染视图
    		var renderView =function(){
    		    var html = "";
    			 	html +="<div class='fj_main'>";
    			 	html += "<div class='ul1'>";
    			 	html += "<span class='fj_top'>上传附件:</span>";
    			 	html += "<span>";
    			 	html +="<form id='"+options.uploadForm+"' enctype='multipart/form-data' action='"+options.upload_url+"'  method='POST'>";
    			 	//隐藏域
    			 	html += "<input type='hidden' id='businessType' name='businessType' value='"+options.businessType+"' />";
    			 	html += "<input type='hidden' id='businessID'   name ='businessID'  value='"+options.businessID+"' />";
    			 	html += "<input type='hidden' id='filePath'   name ='filePath'  value='"+options.filePath+"' />";
    			 	html += "<input type='text' id='"+customParmas.textfield_fj+"' class='mInin2' placeholder='请选择文件'/>";
    			 	html += "<input type='button' class='mInbu1' value='选择文件...'/>";
    			 	html += "<input type='file' name ='logoFile' class='coninf1' id='logoFile'  />";
    			 	html += "<form>";
    			 	html += "</span>";
    			 	html += "</div>";
    			 	html += "<ul class='ul2'>";
    			 	html += "<li><a href='javascript:void(0)' class='delete'><span><img src='../images/icon/delete.png'></span>移除附件</a></li>";
    			 	html += "<li><a href='javascript:void(0)' class='download'><span><img src='../images/icon/page_white_put.png'></span>下载附件</a></li>";
    			 	html += "<li><a href='javascript:void(0)' class='upload'><span><img src='../images/icon/accept.png' ></span>确认上传</a></li>";
    			 	html += "<li><a href='javascript:void(0)' class='cancel'><span><img src='../images/icon/arrow_refresh.png'></span>重新选择</a></li>";
    			 	html += "</ul>";
    			 	
    				html += "<div >";
    			 	html+="<table id='"+customParmas.gridID+"'></table> ";
    			 	html+="<div id='"+customParmas.pager+"'></div>";
    				html += "</div>";
    			 	html+="</div>"; 
    			 	$(customParmas.currentTag).prepend(html);
    			 	initGrid();
    			 	bindEvent();
    		};
    		//动态绑定事件
            var bindEvent = function(){
            	//绑定选择文件change事件
            	$("#logoFile").change(function(){
            		//检查文件的格式
            		var checkFileTypeResult = checkFileType($("#logoFile").val());
        		     //判断上传的文件的格式是否正确  
        			if(!checkFileTypeResult){
        				restFileInput();
        			}
        			//检查文件的大小
        			var checkFileSizeResult = checkFileSize($("#logoFile").get(0));
            		if(!checkFileSizeResult){
            			restFileInput();
            		}else{
            			setFileInput();
            		}
            		
            	});
            	//绑定确认上传文件事件
            	$(".upload").click(function(){
            		uploadFile();
            	});
              	//绑定删除上传文件事件
            	$(".delete").click(function(){
            		batchDelFile();
            	});
              	//绑定取消上传文件事件
            	$(".cancel").click(function(){
            		restFileInput();
            	});
              	//绑定下载文件事件
            	$(".download").click(function(){
            		batchDownloadFile();
            	});
            };
    	    //初始化表格
    		var initGrid = function(){
    			  $("#"+customParmas.gridID).jqGrid({
    				url:options.list_url,
    				postData:initSearchCondition(),
    			    datatype: "json",
  		        	width: 600,
  			        height:200,
  			        multiselect: true,
  			        colNames: ["id","附件名称","操作"],
  			        colModel: [
  			            { name: "id", index:"id",hidden: true},
  			            { name: "fileName", index:"fileName",align:"center",sortable: true},
  			            { name: "customColumn",formatter:actionFormatter, align:"center",search:false,sortable: false}],
  			        pager: "#"+customParmas.pager,
  			        sortname: options.sidx,
  			        sortorder:options.sord,
  			        rowNum: 10,
  			      	rowList: [10, 20, 30],
  			        viewrecords: true,
  			        gridview: true,
  			        autoencode: true,
  			        caption: "附件信息列表",
  			        gridComplete: function(){
  			        	binCompleteEvent();
  			        }
  			    });
    		};
    		//表格初始化条件
          var initSearchCondition = function (){
    			var filters = {
    					groupOp : 'AND',
    					rules : [ ],
    					groups:[]
    				};
    				filters.rules.push(
    						{field : 'businessID',op : 'eq',data :options.businessID}
    					  
    				 );
    				return {filters:JSON.stringify(filters)};
    		}
         // 给表格绑定加载完的事件
		  var binCompleteEvent =function(){
	        	 //选中行鼠标变为手型
	              var ids=$("#"+customParmas.gridID).jqGrid('getDataIDs');
		            for(var i = 0; i < ids.length ; i ++){
		               var id = ids[i];
		               $("#"+id).attr("style","cursor:pointer");
		             }
		           
		         //绑定移除事件
		     	$(".del").click(function(e){
	        		var obj = eval("(" + $(e.target).attr("name") + ")");
	        		deleteFile(obj.id);
	        	});
		        //绑定下载事件
		     	$(".downloadFile").click(function(e){
	        		var obj = eval("(" + $(e.target).attr("name") + ")");
	        		downloadFile(obj.id);
	        	});
		   };
    		//自定义列
    		var actionFormatter = function(cellvalue, options, rowObject){
    			var Obj = "{id:" + "\"" + rowObject.id + "\"" + "}";
    			var columnTemplate ="<a href='javascript:void(0)'><img src='../images/icon/page_white_put.png' width='16' height='16' title='下载附件' class='downloadFile' name='"+ Obj +"'></a>" +
    					"<a href='javascript:void(0)'><img src='../images/icon/delete.png' width='16' height='16' title='移除附件' class='del'  name='"+ Obj +"'></a>";
    			return columnTemplate;	
    		};
//******************************************操作上传附件方法区
    	//上传文件
       var uploadFile = function(){
    	   $.messager.confirm('操作提示','确认上传',function(r){
    		   if (r){
    		   var checkResult = $("#logoFile").val();
    	   		if(checkResult){
    			//判断当前文件夹的文件个数
    			var ids  = $("#"+customParmas.gridID).jqGrid('getDataIDs');
    			var fileTotal = ids.length;
    			if(fileTotal > 20){
    				toastr.error("文件个数已超出服务器资源限度,请删除文件后再上传!");
    				return;
    			}
    			//调用上传文件的方法
    			$("#"+options.uploadForm).asyncSubmit(option);
    			//进度条
    			$.messager.progress({ 
    			    title: '等待', 
    			    msg: '上传文件中...', 
    			    text: '正在上传文件,这可能需要一会儿....' 
    			});
    			
    			}else{
    				toastr.warning("请选择文件上传!");
    			}
    	   		
    		   }
    		   });
    		};
    	//回调参数
    	var option = {
    			callback:function(data){
        			if(data.result==1){
        				var msg = "";
        				if(data.msg){
        				  msg = data.msg;
        				}else{
        				  msg = "上传失败!"; 
        				}
         	        	toastr.error(msg);
        				}else if(data.result==0){
        					toastr.success("上传成功!");
        				}
     	        	//刷新加载表格数据
     	        	refreshGrid($("#"+customParmas.gridID), {sortname:options.sortname,sortorder:options.sord});
     	        	//重置文件选择框
     	        	var checkResult = checkFileSize($("#logoFile").get(0));
            		if(checkResult){
            			restFileInput();
            			setFileInput();
            		}
            		   //关闭进度条
     	        	  $.messager.progress('close');
    				}
    			};
    		
    	//删除文件
    	//参数说明：id 文件id
    	var deleteFile = function(id){
    			$.messager.confirm('操作提示','确认移除',function(r){
    			    if (r){
    			        ajax({
    						url: options.del_url+"/"+id, 
    						type: "post",
    						data: "_method=delete",
    						afterOperation: function(){
    							//刷新表格
    							refreshGrid($("#"+customParmas.gridID), {sortname:options.sortname,sortorder:options.sord});
    						}
    					});
    			    }
    			});
    		};
    	//批量删除文件
    	var batchDelFile = function(){
    			var ids = $("#"+customParmas.gridID).jqGrid ('getGridParam', 'selarrrow');
    			if(ids==undefined||ids.length ==0 ){
    				toastr.warning("请选择一个或多个附件移除!");
    				return;
    			}else{
    			$.messager.confirm('操作','请确认删除数据',function(r){
    		    	if (r){
    			        ajax({
    						url: options.del_url,
    						type: "post",
    						data: {_method:"delete",ids:ids},
    						afterOperation: function(){
    							refreshGrid($("#"+customParmas.gridID), {sortname:options.sortname,sortorder:options.sord});
    						}
    					});
    			    }
    			});
    			}
    			
    		};
    	//下载文件
    	var downloadFile = function(id){
    			$.messager.confirm('操作提示','确认下载附件',function(r){
    			    if (r){
    			    	downloadForm(id);
		    			
    			    }
    			});
    		};
    		
    	//下载个文件
    	var  batchDownloadFile = function(){
    			var ids = $("#"+customParmas.gridID).jqGrid ('getGridParam', 'selarrrow');
    			if(ids==undefined ||ids.length ==0||ids.length!=1 ){
    				toastr.warning("请选择一个附件下载!");
    				return;
    			}else{
    			$.messager.confirm('操作','确认下载附件',function(r){
    		      if (r){
    		    	  downloadForm(ids[0]);
    		       }
    			});
    			}
    			
    		};
    	//下载文件隐藏域表单
    	var downloadForm =function(id){
				var form = $(document.createElement('form')).attr("id", "common_downloadForm")
		    	.attr('action', options.down_url)
                .attr('method','get').css("display", "none");
				$('body').append(form);
				$(document.createElement('input')).attr('type', 'hidden').attr('name','id').attr('value', id).appendTo(form);
				$(form).submit();
    		};
    	//重置fileiput
    	var restFileInput = function(){
    			var file =  $("#"+customParmas.textfield_fj).val();
			    if(file!=null||file!=undefined){
			    	$("#"+customParmas.textfield_fj).val("");
     	        	$("#logoFile").val(""); 
    			 }
    		};
    	//设置fileiput值
    	var setFileInput = function(){
    			var value = $("#logoFile").val();
        		$("#"+customParmas.textfield_fj).val(value);
    		};
    	//检查上传文件的大小
        var checkFileSize = function(fileInput){
        		var checkResult = true;
        		var maxSize = 5 * 1024 * 1024;
        		//火狐
    	        if (fileInput.files && fileInput.files[0]) {  
    				if(fileInput.files[0].size>(maxSize)){
    					toastr.warning('您上传的文件超过5M，请重新上传!');
    					checkResult = false;
    					return checkResult;
    				}
    	        } 
    	        return checkResult;
        	}
        		
    	//判断文件格式
    	var checkFileType = function (file){
				//附件格式
				var arrType = ["xls","xlsx","doc","docx","ppt","pptx","pdf","txt","jpeg","png"];
    			if(file){
    		        var fileType = file.substring(file.lastIndexOf(".")+1);  
					var  indexof = $.inArray(fileType, arrType);
    		        if(indexof==-1){  
    		        	toastr.warning("上传文件格式错误,目前仅支持xls/xlsx/doc/docx/ppt/pptx/pdf/txt/jpeg/png!");
    		        	return false;
    		        }
    			}
    			return true;
    		};
    		
    	//程序入口
    	renderView();
    		
    	}
    });
})(jQuery);

此处上传文件使用了自定义的异步提交表单 插件asyncSubmit,主要代码：

/**
 * option参数
 * 	data:需要传输表单之外的参数json格式
 * 	callback:提交表单之后的回调函数
 * 	check:表单的验证函数
 * 	
 */

(function ($) {
    $.fn.asyncSubmit = function (option) {
    	var me = this;
    	//设置验证
    	if(me.get(0).nodeName.toLowerCase() == "form"){
    		me.submit(function(e){
     		    //拦截上传form，可做验证
    			var checkResult = true;
    			if(option.check){
    				checkResult = option.check();
    			}
    			return checkResult;
     		});
    	}
    	//构建内部iframe隐藏提交
 		var dom = document.createElement("iframe");
 		var random = "i_" +　Math.random() * 1000000;
 		$(dom).attr("name", random).css("display", "none");
 		$("body").append(dom);
 		//清空额外参数
 		var extraParamDiv = "extraParamDiv";
 		$("#" +　extraParamDiv).remove();
 		//设置额外参数
 		var extraDataArray = new Array();
 		if(option.data){
 			if(option.data instanceof Object){
 				var tempDiv = document.createElement("div");
				$(tempDiv).attr("id", extraParamDiv);
 				for(var attr in option.data){
 					var inputEle = document.createElement("input");
 					$(inputEle).attr("name", attr);
 					$(inputEle).val(option.data[attr]);
 					extraDataArray.push(inputEle);
 					$(tempDiv).append(inputEle);
 				}
 				me.append(tempDiv);
 			}
 		}
 		me.attr("target", random);
 		if(window["submitCallback"] == null){
 			window["submitCallback"] = function(data){
 				//提交完后清除隐藏iframe
 				$(dom).remove()
 				//设置回调
 		 		if(option.callback){
 		 			option.callback(data);
 		 		}
 			}
 		}
 		me.submit();
    };
})(jQuery);

主要的后台程序:

控制层：

package com.bjhy.titan.common.controller;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.bjhy.platform.commons.i18n.Message;
import com.bjhy.platform.commons.i18n.MessageUtil;
import com.bjhy.platform.commons.jqgrid.QueryParams;
import com.bjhy.platform.commons.pager.PageBean;
import com.bjhy.platform.util.jqgrid.JqGridUtil;
import com.bjhy.titan.common.consist.UploadPluginConsist;
import com.bjhy.titan.common.domain.AttachmentEntity;
import com.bjhy.titan.common.service.UploadAttachmentBizService;

/**
 * 上传附件controller
 * @author xiaowen
 *
 */
@Controller
@RequestMapping("/uploadAttachment")
public class UploadAttachmentController {

	@Autowired
	private UploadAttachmentBizService uploadAttachmentBizService;
	  
	    //查询列表数据
		@RequestMapping
		public @ResponseBody PageBean list(QueryParams queryParams){
			PageBean pageBean = JqGridUtil.getPageBean(queryParams);
			uploadAttachmentBizService.pageQuery(pageBean);
			return pageBean;
		}
		
		//保存数据
		@RequestMapping(value="/uploadFile",method = RequestMethod.POST)
		public String save(AttachmentEntity attachmentEntity,MultipartFile logoFile,HttpServletRequest request) throws Exception{
			try {
				uploadAttachmentBizService.saveAttchment(attachmentEntity,logoFile);
				request.setAttribute(UploadPluginConsist.UPLOAD_CALLBACK_DATA, UploadPluginConsist.UPLOAD_RESULT_SUCCESS);
			} catch (Exception e) {
				e.printStackTrace();
				request.setAttribute(UploadPluginConsist.UPLOAD_CALLBACK_DATA, UploadPluginConsist.createFailMsg(e.getMessage()));
			}
			return UploadPluginConsist.UPLOAD_RESULT_PAGE;
		}
		
		//单条删除
		@RequestMapping(value="/{id}",method=RequestMethod.DELETE)
		public @ResponseBody Message  delete(@PathVariable String id) throws Exception{
			uploadAttachmentBizService.deleteAttachment(id);
			return MessageUtil.message("attachment.delete.success"); 
		} 
		
		//批量删除 
	    @RequestMapping(method=RequestMethod.DELETE)  
	    public @ResponseBody Message batchDelete(@RequestParam("ids[]") String[] ids) throws Exception { 
	    	uploadAttachmentBizService.deleteAttachment(ids);
	    	return MessageUtil.message("attachment.batchdelete.success"); 
	    }
	    
		
		//文件下载
		@RequestMapping(value="download",method=RequestMethod.GET)
		public ResponseEntity<byte[]> download(String id) throws Exception {
			return uploadAttachmentBizService.download(id);
		}
	    
}

服务层：

package com.bjhy.titan.common.service;

import java.io.IOException;

import org.springframework.http.ResponseEntity;
import org.springframework.web.multipart.MultipartFile;

import com.bjhy.platform.biz.commons.service.BizCommonService;
import com.bjhy.titan.common.domain.AttachmentEntity;
/**
 * 上传附件业务接口
 * @author xiaowen
 *
 */
public interface UploadAttachmentBizService extends BizCommonService<AttachmentEntity, String> {
  
	/**
	 * 保存附件数据
	 * @param attachmentEntity 附件对象
	 * @param logoFile 文件对象
	 */
	public void  saveAttchment(AttachmentEntity attachmentEntity,MultipartFile logoFile);
	
	
	/**
	 * 根据附件id删除附件
	 * @param ids 附件id
	 * @throws Exception
	 */
	public void deleteAttachment(String ...ids)throws Exception;
	
	/**
	 * 根据附件名下载附件
	 * @param id 附件id
	 */
	public ResponseEntity<byte[]> download(String id) throws IOException;
}

服务实现层：

package com.bjhy.titan.common.service.impl;

import java.io.File;
import java.io.IOException;
import java.util.Date;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.multipart.MultipartFile;

import com.bjhy.platform.biz.commons.service.impl.AbstractBizCommonService;
import com.bjhy.platform.persist.dao.CommonRepository;
import com.bjhy.platform.security.commons.util.UserDetailsUtil;
import com.bjhy.platform.util.ExportUtil;
import com.bjhy.platform.util.UUIDUtil;
import com.bjhy.titan.common.dao.UploadAttachmentRepository;
import com.bjhy.titan.common.domain.AttachmentEntity;
import com.bjhy.titan.common.service.SystemConfigService;
import com.bjhy.titan.common.service.UploadAttachmentBizService;
import com.bjhy.titan.common.util.FileUtil;
/**
 * 上传附件业务持久层操作
 * @author xiaowen
 *
 */
@Service
@Transactional
public class UploadAttachmentBizServiceImpl  extends AbstractBizCommonService<AttachmentEntity, String> implements UploadAttachmentBizService{
   @Autowired
	private UploadAttachmentRepository uploadAttachmentRepository;
	@Autowired
	private SystemConfigService systemConfigService;

	@Override
	public void saveAttchment(AttachmentEntity attachmentEntity, MultipartFile logoFile) {
		if(logoFile.getSize() > 5 * 1024 * 1024){
			throw new RuntimeException("上传文件不能大于5M");
		}
		try {
			//文件路径
			String filePath = systemConfigService.getAttachmentPath()+File.separator+attachmentEntity.getFilePath();
			//显示的文件名
			String fileName = logoFile.getOriginalFilename();
			//真实的文件名
			String file[] = logoFile.getOriginalFilename().split("\\.");
			String realFileName = file[0]+UUIDUtil.uuid()+"."+file[1];
			//封装附件对象
			attachmentEntity.setFileName(fileName);
			attachmentEntity.setRealFileName(realFileName);
			attachmentEntity.setInputPesion(UserDetailsUtil.getCurrentUser().getUsername());
			attachmentEntity.setFilePath(filePath);
			attachmentEntity.setCreateDate(new Date());
			//保存文件至数据库
			save(attachmentEntity);
	        //存储附件于服务器上
			FileUtil.saveFile(logoFile.getBytes(), filePath, realFileName);
		} catch (Exception e) {
			e.printStackTrace();
			throw new RuntimeException(e);
		}
	}

	@Override
	public void deleteAttachment(String ...ids) throws Exception {
		for(String id : ids){
			//根据id查询文件记录
			AttachmentEntity temp = uploadAttachmentRepository.findOne(id);
			//文件路径
			String path = temp.getFilePath()+File.separator+temp.getRealFileName();
			//删除服务器上的文件
			FileUtil.deleteFile(path);
			//删除数据库记录	
			uploadAttachmentRepository.delete(temp);
		}
		
	}
	
	@Override
	public ResponseEntity<byte[]> download(String id) throws IOException {
			//根据id查询文件记录
			AttachmentEntity temp = uploadAttachmentRepository.findOne(id);
		    //文件路径
		    String filePath = temp.getFilePath()+File.separator+temp.getRealFileName();
	        return ExportUtil.getResponseEntityByFile(new File(filePath), temp.getFileName());
	}
	
	@Override
	protected String getPageQl() {
		return "select  a from AttachmentEntity a where 1=1";
	}

	@Override
	protected CommonRepository<AttachmentEntity, String> getRepository() {
		return uploadAttachmentRepository;
	}



}

数据访问层：此处主要使用的是spring data 

package com.bjhy.titan.common.dao;

import com.bjhy.platform.persist.dao.CommonRepository;
import com.bjhy.titan.common.domain.AttachmentEntity;

public interface UploadAttachmentRepository extends CommonRepository<AttachmentEntity, String> {

}