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