Jfinal附件、照片上傳及下載

1、附件前臺

<div class="form-group">
<label class="col-sm-4 control-label no-padding-right" for="form-field-1">附件</label>
	<div class="col-sm-6">
	<% if(!isEmpty(param.fujian)) {%>
	        <a type="button" href="${cxt!}/test/param/downloadFujian/${escapeXml(param.ids!)}" >下載附件</a>
	<% } else { %>
		<span> 無附件</span>
	<% }%>
        </div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label no-padding-right" for="form-field-1">附件</label>
	<div class="col-sm-6">
		<input type="file" name="param.fujian" class="input-xlarge">
	</div>
</div> 
 

2、附件後臺

// 儲存
public void save() {
	List<UploadFile> filelist = getFiles();
	Param param = getModel(Param.class);
	for(UploadFile file : filelist) {
		if(file.getParameterName().contains("fujian")) {
			param.setFujian(file.getFileName());
		} else {
			param.setZhaopian(file.getFileName());
		}
	}
	param.save();
	redirect("/test/param");
}
 

public void downloadFujian() { // 下載
	Param param = Param.dao.findById(getPara());
	if(StringUtils.isNotBlank(param.getFujian())) {
		renderFile(param.getFujian());
	} else {
		renderNull();
	}
}

3、照片前臺

var file;
 $(function () {
     $("#uploadfile").change(function(){
 		$("#lookFile").hide();
 		$("#checkFile").show();
 		file = this.files[0];
 	});
});
 

/* 檢視照片（儲存後） */
function showUri() {
	var i = Math.round(Math.random() * 10000);
	var html = "<image src='${cxt!}/test/param/viewZhaopian/"+$("#uri").val()+"-"+ i +"' style='width:320px;height:240px'></image>"
	var d = dialog({
	    title: '操作提示',
	    content: html,
	    okValue: '確定',
	    ok: function () {}		    
	});
	d.show();
	out.clear();
	out = pageContext.pushBody();
}

/* 照片預覽（儲存前） */
function previewFile() {
	var url = null ; 
	if (window.createObjectURL!=undefined) { // basic
		url = window.createObjectURL(file) ;
	} else if (window.URL!=undefined) { // mozilla(firefox)
		url = window.URL.createObjectURL(file) ;
	} else if (window.webkitURL!=undefined) { // webkit or chrome
		url = window.webkitURL.createObjectURL(file) ;
	}
	var html = "<image src='"+url+"' style='width:320px;height:240px'></image>"
	var d = dialog({
	    title: '操作提示',
	    content: html,
	    okValue: '確定',
	    ok: function () {}		    
	});
	d.show();
}

<div class="form-group">
	<label class="col-sm-4 control-label no-padding-right" for="form-field-1">照片</label>
	<div class="col-sm-6">
		<input id="uri" value="${escapeXml(param.ids!)}" type="hidden"/>
		<input type="file" id="uploadfile" name="param.zhaopian" class="input-xlarge" accept="image/*"/>
		<a type="button" id="lookFile" ${isEmpty(param.zhaopian)?'hidden':'' } onclick="showUri()">檢視照片</a>
		<a type="button" id="checkFile" onclick="previewFile()" hidden>預覽照片</a>		
	</div>
</div>

4、照片後臺(使用檔案流實現)，一定記得在結尾加上renderNull()

public void viewZhaopian() {
	Param param = Param.dao.findById(getPara(0));
	byte[] buffer = new byte[1024*8];
        FileInputStream fis = null;
        BufferedInputStream bis = null;
        OutputStream os = null;
	try {
		String realPath = PathKit.getWebRootPath() + "/files/";
		String fileName = param.getZhaopian();
    	if (getRequest().getHeader("User-Agent").toUpperCase().indexOf("MSIE") > 0) {  
    		fileName = URLEncoder.encode(fileName, "UTF-8");  
    	} else {  
    		fileName = new String(fileName.getBytes("UTF-8"), "ISO8859-1");  
    	}
    	File file = new File(realPath, fileName);
    	getResponse().setCharacterEncoding("UTF-8");	// 設定編碼格式
    	getResponse().setContentType("application/force-download");// 設定強制下載不開啟
    	getResponse().addHeader("Content-Disposition","attachment;fileName=" + fileName);// 設定檔名
        fis = new FileInputStream(file);
        bis = new BufferedInputStream(fis);
        os = getResponse().getOutputStream();
        int i = bis.read(buffer);
        while (i != -1) {
            os.write(buffer, 0, i);
            i = bis.read(buffer);
        }
        bis.close();
        fis.close();
        os.flush();  
        os.close();
    } catch (Exception e) {
    	log.error("圖片檢視失敗，原因：",e);
        e.printStackTrace();
    } finally {
        if (bis != null) {
            try {
                bis.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        if (fis != null) {
            try {
                fis.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        if (os != null) {
            try {
            	os.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
    renderNull();
}