本次上传用到了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"); 取。解决报错