多文件上传和下载

来源：互联网发布：darma 知乎编辑：程序博客网时间：2024/06/10 16:14

本次上传用到了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;elsereturn 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