Uploadify 控件上传图片 + 预览

jquery的Uploadify控件上传图片和预览使用介绍。

在简单的servlet系统中和在SSH框架中，后台处理不同的，在三大框架中图片预览时费了不少力气，所以下面将两种情况都介绍一下。

1，前台代码

script：

$("#uploadify").uploadify({
'langFile' : '<%=request.getContextPath()%>/config/juploadify/uploadifyLang_cn.js',
'swf' : '<%=request.getContextPath()%>/config/juploadify/uploadify.swf',
'uploader' : '<%=request.getContextPath()%>/UploadAction/uploadImg.action', //图片上传的action方法
'queueID' : 'fileQueue',
'auto' : true,
'multi' : true,
'buttonCursor' : 'hand',
'fileObjName' : 'uploadify',
'buttonText' : '上传图片',
'height' : '25',
'progressData' : 'percentage',
'fileTypeDesc' : '支持格式:jpg/gif/jpeg/png/bmp.',
'fileTypeExts': '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式
onUploadSuccess : function(file,data,response) {
//设置图片预览
var _arr_val = data.split(",");
$("#photo").val(_arr_val[1]);
$("#pic_view").attr("src","<%=request.getContextPath()%>" + _arr_val[1]);
}
});

html

<td width="15%" rowspan="9" align="center">
<div id="fileQueue" style="width:200px;"></div>
<input type="file" name="uploadify" id="uploadify" />
<input type="hidden" name="photo" id="photo" value="">
<div id="pic_view_div" style="width:150px; height:180px">
<img src="<%=request.getContextPath()%>/image/nopic.gif" width="150" height="180" id="pic_view">
</div>
</td>

2，servlet中后台处理

public void uploadImg(){
// 解决服务器端消息返回客户端后中文字符乱码
response.setHeader("Content-Type", "text/html;charset=UTF-8");
HttpSession session = request.getSession();
PrintWriter outs = response.getWriter();
//获取上传图片的路径
String savePath = request.getSession().getServletContext().getRealPath("");
String saveDirectory = savePath + "/Imgupload";
File file = new File(saveDirectory);
if (!file.exists()) {
file.mkdirs();
}
//设置图片大小
if (StringUtils.isBlank(this.fileSizeLimit.toString())) {
this.fileSizeLimit = "100";// 默认100M
}
int maxPostSize = Integer.valueOf(this.fileSizeLimit).intValue() * 1024 * 1024;
String encoding = "UTF-8";
MultipartRequest multi = null;
try {
multi = new MultipartRequest(request, saveDirectory, maxPostSize, encoding);
} catch (Exception e) {
System.out.println("发生异常：" + e.getMessage());
return;
}
//图片预览功能实现
String _result = "";
Enumeration files = multi.getFileNames();
while (files.hasMoreElements()) {
String name = (String) files.nextElement();
File f = multi.getFile(name);
if (f != null) {
String fileName = multi.getFilesystemName(name);
String lastFileName = saveDirectory + "/" + fileName;
result += multi.getOriginalFileName(name) + "," + savePath + "/" + fileName;
}
}
outs.print(_result);
}

注意：action方法返回的字符串为图片的名称和图片的路径。

3，SSH框架中使用

package cn.com.zzcy.base.action;
import java.io.File;
@Namespace("/UploadAction")
public class UploadAction {
private File uploadify;
public File getUploadify() {
return uploadify;
}
public void setUploadify(File uploadify) {
this.uploadify = uploadify;
}
private String uploadifyFileName;
public String getUploadifyFileName() {
return uploadifyFileName;
}
public void setUploadifyFileName(String uploadifyFileName) {
this.uploadifyFileName = uploadifyFileName;
}
/**
* 上传图片
* @throws IOException
*/
@Action("uploadImg")
public void uploadImg(){
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
String savePath = request.getSession().getServletContext().getRealPath("");
PrintWriter out = null;
String resultStr = "";
String extName = "";// 扩展名
String newFileName = "";// 新文件名
try {
response.setCharacterEncoding("utf-8");
out = response.getWriter();
//获取文件的扩展名
if (uploadifyFileName.lastIndexOf(".") >= 0) {
extName = uploadifyFileName.substring(uploadifyFileName.lastIndexOf("."));
}
//根据当前时间生成新的文件名称
String nowTime = new SimpleDateFormat("yyyymmddHHmmss").format(new Date());// 当前时间
newFileName = nowTime + extName;
//设置文件保存路径
String param = request.getParameter("param");
savePath = savePath + "/ImgUpload/"+param+"/";
File file = new File(savePath);
if(!file.exists()){
file.mkdirs();
}
uploadify.renameTo(new File(savePath+newFileName));
resultStr = uploadifyFileName+","+"/ImgUpload/"+param+"/"+newFileName;
} catch (IOException e) {
e.printStackTrace();
}finally{
out.print(resultStr);
}
}
}

注意：要定义局部变量并提供set方法，这样图片的名称和信息才能自动注入进入。

这里通过request方法获取不到图片信息。。。

4，实现的效果图如下：

原文出自：http://blog.csdn.net/lishuangzhe7047/article/details/41803175

巴特西

Uploadify 控件上传图片 + 预览

最新文章

热门文章