使用uploadify3上传图片的示例支持图片预览

原创于 2018-11-13 07:45:45 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了一个使用jQuery Uploadify插件实现的前端文件上传解决方案。包括前端配置、核心代码及服务器端处理逻辑，适用于多文件上传场景，特别是图片上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

首先是前端代码。

导入jquery是必须的。省略。

其次是：

<link href="/js/jquery/plugins/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery/plugins/uploadify/jquery.uploadify.min.js"></script>

核心配置：

$(document).ready(function() {
$("#uploadify").uploadify({
auto : true,
swf : '/js/jquery/plugins/uploadify/uploadify.swf',
uploader : '/register/peBzzRec_uploadFile.action',//后台处理的请求
queueID : 'fileQueue',//与下面的id对应
buttonClass :'btn',
buttonImage : null,
formData : {recid:"${rec.id}"},
buttonText :'点击浏览图片',
//multi : true,多文件上传
//'uploadLimit' : 2,//允许上传文件的个数
//'queueSizeLimit' : 3,//同时上传的文件
fileTypeDesc : '请选择图片，仅支持格式JPG,BMP,PNG,GIF，最大4M',
fileTypeExts : '*.JPG;*.GIF;*.PNG;*.BMP;', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
buttonText : '点击上传',
fileObjName : 'file',//服务端File对应的名称。
fileSizeLimit : '4MB',//文件上传的大小限制，如果是字符串单位可以是B KB MB GB，默认是0，表示无限制
width :65,
height :20,
onUploadSuccess : function(file,data,response) {//上传完成时触发（每个文件触发一次
if(response==true){//如果服务器返回200表示成功
if(data.indexOf("#Err")==-1){//判断是否有手动抛出错误信息
$("#faximage").attr("src",data+"?"+Math.random());//重新生成缩略图
$("#showtrue").attr("href",data+"?"+Math.random());
$$("showtrue").style.display="";
$("#pic").val(data);//保存数据
$("#nowpic").val("2");//表示重新上传了图片
}else{
//否则输出错误信息
data=eval("("+data+")");
artAlert(data.msg,'e');
}
}else{
artAlert('上传失败','e');
}
},
onUploadError : function(file,data,response) {
artAlert('上传失败','e');
}
});
});

然后下面是页面配置：

<td class="lefttd" valign="middle">
<input name="peBzzFaxInfo.pic" value="${peBzzFaxInfo.pic}" type="hidden" id="pic" class="inputxt" nullmsg="请上传底联信息" datatype="*5-250" size="50" errormsg="请上传底联信息！" />
<input value="1" type="hidden" id="nowpic" name="nowpic" />
<%--存放提交之前的图片--%>
<input name="peBzzFaxInfo.id" value="${peBzzFaxInfo.id}" type="hidden" />
<input name="file" id="uploadify" contenteditable="false" size="30" type="file" />
<span class="red"><a href="/cms/cjwt/232.htm" target="_blank">如何上传底联</a> </span>
<span class="Validform_checktip">用以确认汇款信息,上传文件小于4M的JPG图片</span>
<div id="fileQueue"></div>
</td>

最后是服务器端处理：

get/set省略。

private File file;
private String fileFileName;
private String fileContentType;

public String uploadFile() {
JSONObject obj = new JSONObject();
PeBzzRecruit peBzzRecruit = (PeBzzRecruit) session().getAttribute("rec");
if (peBzzRecruit == null) {// 如果没有取到，可能是超时或者是SWF上传跨session了
// 处理火狐浏览器跨session的问题
// 页面传过来的sessionid从session过滤器中集合中查找查找当前session
String recid = request().getParameter("recid");
if (recid == null) {// 如果没有找到，超时了
obj.put("msg", "登录超时，请退出重新登录。");
obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
renderJson(obj.toString());
return null;
}
DetachedCriteria peb = DetachedCriteria.forClass(PeBzzRecruit.class);
peb.createCriteria("peBzzBatch", "peBzzBatch");
peb.createCriteria("peEnterprise", "peEnterprise1").createCriteria("peEnterprise", "peEnterprise2").createCriteria("peEnterprise", "peEnterprise3", DetachedCriteria.LEFT_JOIN);
peb.createCriteria("peSite", "peSite", DetachedCriteria.LEFT_JOIN);
peb.createCriteria("ssoUser", "ssoUser");
peb.add(Restrictions.eq("id", recid));
List<PeBzzRecruit> recs = null;
try {
recs = this.getGeneralService().getDetachList(peb);
if (recs == null || recs.size() == 0) {
obj.put("msg", "没有找到相关用户，原因：用户信息不完整。");
obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
renderJson(obj.toString());
return null;
}
peBzzRecruit = recs.get(0);
} catch (EntityException e) {
obj.put("msg", "获取用户信息时出错。");
obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
renderJson(obj.toString());
return null;
}
}
PeBzzBatch peBzzBatch = peBzzRecruit.getPeBzzBatch();
if (peBzzBatch == null) {
obj.put("msg", "该用户尚未分配学期！");
obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
renderJson(obj.toString());
return null;
}
PeEnterprise pe = peBzzRecruit.getPeEnterprise();
if (pe == null) {
obj.put("msg", "请先完善个人省市县信息！");
obj.put("stat", "#Err");// 返回#Err表示服务端返回错误信息ERROR
renderJson(obj.toString());
return null;
}
String provCode = null;// 省份代号
if (pe.getLevel() == 1) {
provCode = pe.getCode();
} else if (pe.getLevel() == 2) {
provCode = pe.getPeEnterprise().getCode();
} else if (pe.getLevel() == 3) {
provCode = pe.getPeEnterprise().getPeEnterprise().getCode();
}
faxInfo();// 查询
PeBzzFaxInfo p = this.getPeBzzFaxInfo();
// 存放底联的文件夹：/incoming/faxinfo/批次号/省份代号
String path = "/incoming/faxinfo/" + peBzzBatch.getBatchCode() + "/" + provCode;
File uploadFile = getFile();
try {
if (uploadFile != null && !"".equals(uploadFile.getPath())) {
String realPath = session().getServletContext().getRealPath(path);
File dir = new File(realPath);
if (!dir.isDirectory()) {
dir.mkdirs();
}
String picname = "/" + peBzzRecruit.getSsoUser().getUserName();
if (p == null || p.getPic() == null) {
picname += ".JPG";// 默认以用户名为图片
} else {
String picpath = session().getServletContext().getRealPath(p.getPic());
// 判断文件是否存在
picpath = picpath.replaceAll("\\s", "");
File picfile = new File(picpath);