关闭

Uploadify 控件上传图片 + 预览

21605人阅读 评论(6) 收藏 举报
分类:

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

     

7
5
查看评论

基于jquery.uploadify实现图片上传

效果图: 调用说明 1、JSP页面HTML标签,如下添加 2、需要在jsp页面,添加脚本,调用API接口如下: var uploadifyItems = [ {render:'#uploadify1',fileQueue:'fileQ...
  • shichen2010
  • shichen2010
  • 2017-01-19 09:58
  • 960

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

首先是前端代码。 导入jquery是必须的。省略。 其次是: link href="/js/jquery/plugins/uploadify/uploadify.css" rel="stylesheet" type="text/css&...
  • yaerfeng
  • yaerfeng
  • 2014-09-11 10:40
  • 11461

uploadify批量上传图片

该上传摘自b-jui官网! 具体效果可以查看:http://demo.b-jui.com/ 该方法能一次选择多张图片,并能预览图片,取消上传,可以单独一张张上传,也可一次全部上传完成! 这里是一次全部上传,要单张上传得自己改代码! 引入的js,css改天加上下载路径,或去b-jui官网下载 ...
  • qq_25384901
  • qq_25384901
  • 2017-07-19 10:30
  • 207

uploadify插件实现多个图片上传并预览

使用uploadify插件可方便实现图片上传预览功能。自带
  • liu__hua
  • liu__hua
  • 2014-08-19 14:19
  • 28884

uploadify 上传图片附件问题

在项目中遇到了上传多张图片问题,还需要时时上传后展示图片,就用uploadify做了这个功能,供大家参考借鉴。 $('#file_upload').uploadify({       ...
  • sdmxdzb
  • sdmxdzb
  • 2015-12-03 08:55
  • 569

上传图片问题(html标签实现input/file功能),及uploadify插件

  • 2014-02-20 16:42
  • 4.59MB
  • 下载

uploadify jquery上传图片插件实例

  • 2013-09-13 01:06
  • 84KB
  • 下载

jquery 上传空间uploadify使用笔记

基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件。 要求使用jquery1.4或以上版本,flash player 9.0.24以上。 有两个版本,一个用flash,一个是html5。html5的需要付费~所以这里只说flash版本的用法...
  • superdog007
  • superdog007
  • 2013-12-10 13:29
  • 17144

struts2整合uploadify插件实现批量上传,上传成功后跳转并传递参数

<link href="static/uploadify/uploadify.css" rel="stylesheet" type="text/css" /> <script type="text/javasc...
  • yhhazr
  • yhhazr
  • 2012-03-03 16:57
  • 5724

web图片上传控件

  • 2016-06-24 09:02
  • 940KB
  • 下载
    个人资料
    • 访问:2072664次
    • 积分:12339
    • 等级:
    • 排名:第1393名
    • 原创:151篇
    • 转载:12篇
    • 译文:1篇
    • 评论:1672条
    博客专栏
    最新评论