Uploadify 控件上传图片 + 预览

蔚落 2022-08-06 01:07 256阅读 0赞

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，实现的效果图如下：

![Center][]

[Center]: /images/20220806/79264a3ac8344ce390b2af8c19835388.png