Jfinal附件、照片上传及下载

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() {

	$("#edu_param_updateuser_uploadfile").change(function() {
		$("#edu_param_updateuser_lookFile").hide();
		$("#edu_param_updateuser_checkFile").show();
		file = this.files[0];
		$('.remove').on('click', function () {
			$("#edu_param_updateuser_checkFile").hide();
		})
	});
});

/* 查看照片（保存后） */
function showUri_suu() {
	var i = Math.round(Math.random() * 10000);
	var html = "<image src='${cxt!}/jw/param/viewZhaopian/"
			+ $("#edu_param_updateuser_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_suu() {
	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">照片：</label>
	<div class="col-sm-6">
        <input type="hidden" id="edu_param_updateuser_uri" value="${escapeXml( param.ids!)}"/>
        <input type="file" id="edu_param_updateuser_uploadfile" name="param.zp" accept="image/*" />
        <button type="button" id="edu_param_updateuser_lookFile" class="btn_add1"
            ${isEmpty(param.zp)?'hidden':'' } onclick="showUri_suu()">
			<i class="fa fa-camera"></i> 查看照片
		</button>
		<button type="button" id="edu_param_updateuser_checkFile" class="btn_add1"
								onclick="previewFile_suu()" hidden>
			<i class="fa fa-camera"></i> 预览照片
		</button>
	</div>
</div>

.btn_add1{
	background: -webkit-linear-gradient(#fff,#efefef); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#fff,#efefef); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#fff,#efefef); /* Firefox 3.6 - 15 */
    background: linear-gradient(#fff,#efefef); /* 标准的语法（必须放在最后） */
	border:#ccc 1px solid;
	border-radius:3px;
	padding:4px 10px;
	}
.btn_add1:hover{ background:#efefef; border:#ccc 1px solid; border-radius:3px; color:#a50000;padding:4px 10px;}

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();
}