多文件上传和下载

插件 专栏收录该内容
2 篇文章 0 订阅

本次上传用到了jquery.MultiFile.js上传插件,需要的插件自己网上下载。

效果图:(先介绍多文件上传)


jsp页面

<tr >
  					<td>
  						  附件:
  					</td>
  					<td >
  						<input style="height: 20px;padding-left: 100px;" type="file" size="50" id="attachFiles" name="attachFiles" class="multi {accept:'gif|jpg|doc|docx|xls|xlsx|rar|zip|txt|ppt|pdf', max:5, STRING: {remove:'删除',selected:'Selecionado: $file',denied:'无效的文件格式 $ext!',duplicate:'已经选了此文件:\n$file!'}}"/>
  					</td>
  				</tr>
  		 	<%--不加这个div,MultiFile.js会报空指针异常 --%>
  			<div id="uploadedFiles">
			</div>
			<div>
我只粘贴了关键代码

accept:'gif|jpg|doc|docx|xls|xlsx|rar|zip|txt|ppt|pdf'   表示接收上传的类型,这个可以自己选择定义。

max:5  表示最大的上传数。

STRING: {remove:'删除',selected:'Selecionado: $file',denied:'无效的文件格式 $ext!',duplicate:'已经选了此文件:\n$file!'}

删除链接的显示,以及错误后的提示信息。

<div id="uploadedFiles"> 这个div不可少,缺少会在删除的时候报js异常,但不会影响正常的功能。


js页面

/**
 * 选择相关的文件
 */
UserFeedBackMain.prototype.submitAndClose=function(str){
	var  url = constants.CTX + "/userFeedBackManage!saveUserFeedBack.action?isClose="+str;
	$('#form1').form('submit',
   	{
		url:url,
		type: "POST",
		dataType : 'json',
        onSubmit: function()
        {
			var flag=userFeedBackMain.checkForm();
			if(flag)
				return true;
			else
				return false;
        },
        success: function(data)
        {
        	var obj=JSON.parse(data);
        	if(obj.code=='200'){
        		alert(obj.msg);
        		if(str=='yes'){
        			window.close();
        		}else{
        			$('#form1')[0].reset();
        			$("a.MultiFile-remove").each(function(i){
   						this.click();
					});
        		}
        	}else if(obj.code=='500'){
        		alert(obj.msg);
        	}
        	
      	}
  	});
}
由于是文件上传,故需要提交的方式,返回值是以流的形式返回的。

该表单提交需要导入一个插件:jquery.easyui.min.js

$("a.MultiFile-remove").each(function(i){
    this.click();
});    重置选中的文件。


action中
定义的属性

 //上传附件
    private static final long MAX_LENGTH = 2 * 1024 * 1024L; // 2MB
    private static final int HTTP_REDUNDANT_LENGTH = 1024; // 1KB
    private List<File> attachFiles;
    private List<String>   attachFilesFileName;
attachFiles  必须和jsp中file的name保持一致。
attachFilesFileName 同上,只是在后面添加了FileName

/**
    * 保存用户反馈意见
    * <功能详细描述>
    * @return [参数说明]
    * @return String [返回类型说明]
    * @exception throws [违例类型] [违例说明]
    * @see [类、类#方法、类#成员]
    */
    public String saveUserFeedBack(){
        log.info("UserFeedBackManageAction.saveUserFeedBack");
        if(null==userFeedBack)
            userFeedBack=new UserFeedBack();
        String resultCont = null;
        List<HashMap<String,Object>> list=null;
        HashMap<String,Object> map=null;
        try{
            int filesSize=getRequest().getContentLength() - HTTP_REDUNDANT_LENGTH;
            if( filesSize > MAX_LENGTH){
                resultCont="{\"code\":\"500\",\"msg\":\"当前上传的文件大小"+ filesSize/(1024*1024)+"MB 请选择 2MB以下文件\"}";
            }else{
                if(null!=attachFiles){
                    list=new ArrayList<HashMap<String,Object>>();
                    for(int i=0;i<attachFiles.size();i++ ){
                        map=new HashMap<String,Object>();
                        String fileName=attachFilesFileName.get(i);
                        map.put("fileName", fileName);
                        map.put("fileConst", FileCopyUtils.copyToByteArray(attachFiles.get(i)));
                        map.put("fileSuffix", fileName.substring(fileName.lastIndexOf(".")));
                        map.put("fileDesc", fileName);
                        map.put("state", "1");
                        map.put("empeeId", super.getAuth().getUserID());
                        list.add(map);
                    }
                }
                userFeedBack.setFbPeople(super.getAuth().getUserID()+"");
                userFeedBack.setFbLatnId(Long.valueOf(super.getAuthLatnCd()));
                userFeedBack.setFbStatusCd("1000"); //1000待处理  1100已处理 默认1000
                userFeedBackService.saveUserFeedBack(getAuthLatnCd(), list, userFeedBack);
                resultCont="{\"code\":\"200\",\"msg\":\"发送成功\"}";
            }
            
        }catch(Exception e){
            log.error("UserFeedBackManageAction.saveUserFeedBack 异常", e);
            resultCont="{\"code\":\"500\",\"msg\":\"发送失败\"}";
        }
        super.getResponse().setCharacterEncoding("GBK");
        PrintWriter out = null;
        try {
            
            out = getResponse().getWriter();
            out.println(resultCont);
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if(null!=out)
            out.close();
        }
        return null;
    }

ibatis中

<!-- 插入文件 -->
	<insert id="inserPrdFile" parameterClass="java.util.HashMap">
		INSERT INTO TB_PRD_FILE
		  (FILE_ID,
		   FILE_NAME,
		   FILE_CONST,
		   FILE_SUFFIX,
		   FILE_DESC,
		   CRT_DATE,
		   MOD_DATE,
		   EMPEE_ID,
		   OBJ_ID,
		   OBJ_TYPE,
		   STATE)  
		 VALUES
		  (SEQ_PRD_FILE.NEXTVAL, 
		   #fileName#, 
		   #fileConst#,
		   #fileSuffix#,
		   #fileDesc#, 
		   sysdate, 
		   sysdate, 
		   #empeeId#,
		   #objId#,
		   #objType#,
		   #state#)
	</insert>

写法和一般的插入相同。


文件的下载

jsp文件不介绍了,就是平常调用一个方法。

js中

/**
 * 下载附件
 */
UserFeedBackMain.prototype.downloadAttach=function(id,name){
	var  url = constants.CTX + "/userFeedBackManage!downloadAttach.action?fileId="+id+"&fileName="+name;
	$("#form1")[0].action = url;
	$("#form1")[0].submit();
}

action中

/**
     * 下载附件
     * <功能详细描述> [参数说明]
     * @return void [返回类型说明]
     * @exception throws [违例类型] [违例说明]
     * @see [类、类#方法、类#成员]
     */
    public void downloadAttach(){
        String fileId=super.getRequest().getParameter("fileId"); 
        String fileName=super.getRequest().getParameter("fileName"); 
        byte[] file_const = null;
        InputStream inStream = null;
        ByteArrayOutputStream bStream = null;
        OutputStream out = null;
        try{
            out = super.getResponse().getOutputStream();
            getResponse().reset();
            getResponse().setContentType("application/x-download");
            getResponse().setHeader ( "Content-Disposition" ,"attachment;filename="+new String(fileName.getBytes("GBK"), "ISO-8859-1"));
            HashMap<String,Object> map=userFeedBackService.downloadAttach(getAuthLatnCd(), Long.valueOf(fileId));
            Blob blob=(Blob)map.get("FILECONST");
            inStream = blob.getBinaryStream();
            bStream = new ByteArrayOutputStream();
            Streams.copy(inStream, bStream, true);
            file_const = bStream.toByteArray();
            out.write(file_const);
            out.flush();
         }catch(Exception e){
            log.error("UserFeedBackManageAction.downloadAttach 异常", e); 
         }finally{
            if(out != null){
                try{
                    out.close();
                }catch(Exception e){
                    out = null;
                }
            }
            if(inStream != null){
                try{
                    inStream.close();
                }catch(Exception e){
                    inStream = null;
                }
            }
            if(bStream != null){
                try{
                    bStream.close();
                }catch(Exception e){
                    bStream = null;
                }
            }
        }
    }

这里注意一点:

<!-- 查找文件的内容 -->
	<select id="selectPrdFileConst" resultClass="java.util.HashMap" parameterClass="java.lang.Long">
		SELECT FILE_CONST fileConst FROM TB_PRD_FILE WHERE FILE_ID =#fileId#
	</select>

开始直接在resultClass中写入 java.sql.Clob,但是会报报错。

后来直接返回java.util.HashMap,然后在action层 用Blob blob=(Blob)map.get("FILECONST"); 取。解决报错




  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

sunslie03

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值