uploadifive struts2实现图片上传

uploadify是来自国外的一款优秀的jQuery上传插件,主要功能是批量上传文件,带进度显示。

下面以HTML5 Version版本为例介绍uploadifive的使用,结合Struts2

各软件版本如下:

jQuery :1.8.0

Struts2 : 2.3.16.3

UploadiFive : 1.2.2

由于HTML5 Version是收费的,但可移步到xxx进行下载

一、添加对js和css文件的引用

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

二、JSP页面代码

<body>
	<input id="file_upload" type="file" name="file" />
	<div id="tip-queue"></div>
</body>
<script type="text/javascript">
    $(function(){
  	  $(‘#file_upload‘).uploadifive({
  	        //‘auto‘ : false,   //取消自动上传
  	        ‘uploadScript‘ : ‘fileUploadAction.action‘, //处理上传文件Action路径
  	        ‘fileObjName‘ : ‘file‘,        //文件对象
	        ‘buttonText‘   : ‘选择文件‘,   //按钮显示文字
	        ‘queueID‘      : ‘tip-queue‘, //提示信息放置目标
	        ‘fileType‘     : ‘image/*‘,   //允许上传文件类型
	        ‘onUploadComplete‘ : function(file, data) { //文件上传成功后执行
  		      console.info(‘The file ‘ + file.name + ‘ uploaded successfully.‘);
	        }
  	  });
    })
</script>

三、struts.xml

<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
	"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
	<package name="ajax_code" extends="json-default">
        <!-- 文件上传 -->
        <action name="fileUploadAction" class="com.home.FileAction" method="fileUpload">
            <result type="json" name="success">
                <param name="contentType">text/html</param>
            </result>
        </action>
    </package>
</struts>

四、处理上传文件Action

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import org.apache.struts2.ServletActionContext;

public class FileAction {
	private File file; // 文件
	private String fileFileName; // 文件名
	private String filePath; // 文件路径
	private InputStream inputStream;

	/**
	 * 文件上传
	 *
	 * @return
	 */
	public String fileUpload() {
		String path = ServletActionContext.getServletContext().getRealPath("/upload");
		File ff = new File(path); // 判断文件夹是否存在,如果不存在则创建文件夹
		if (!ff.exists()) {
			ff.mkdir();
		}
		try {
			if (this.file != null) {
				File f = this.getFile();
				String fileName = java.util.UUID.randomUUID().toString(); // 采用时间+UUID的方式随即命名
				String name = fileName
						+ fileFileName.substring(fileFileName.lastIndexOf(".")); // 保存在硬盘中的文件名

				FileInputStream inputStream = new FileInputStream(f);
				FileOutputStream outputStream = new FileOutputStream(path
						+ "\\" + name);
				byte[] buf = new byte[1024];
				int length = 0;
				while ((length = inputStream.read(buf)) != -1) {
					outputStream.write(buf, 0, length);
				}
				inputStream.close();
				outputStream.flush();
				// 文件保存的完整路径
				// 比如:D:\tomcat6\webapps\eserver\\upload\a0be14a1-f99e-4239-b54c-b37c3083134a.png
				filePath = path + "\\" + name;
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return "success";
	}

	public File getFile() {
		return file;
	}

	public void setFile(File file) {
		this.file = file;
	}

	public String getFileFileName() {
		return fileFileName;
	}

	public void setFileFileName(String fileFileName) {
		this.fileFileName = fileFileName;
	}

	public String getFilePath() {
		return filePath;
	}

	public void setFilePath(String filePath) {
		this.filePath = filePath;
	}

	public InputStream getInputStream() {
		return inputStream;
	}

	public void setInputStream(InputStream inputStream) {
		this.inputStream = inputStream;
	}

}

项目基本结构如下图:

效果如图:

项目源码下载:xxx

作者:itmyhome

时间: 2024-10-14 00:30:54

uploadifive struts2实现图片上传的相关文章

xhEditor struts2实现图片上传

xhEditor的环境搭建请参考http://blog.csdn.net/itmyhome1990/article/details/38422255,这时我们打开图片功能 是没有上传按钮的 如果想要出现上传按钮,在xhEditor设置以下参数: html5Upload : false                     //此属性必须为false upImgUrl : "ImgUpload.action" //上传服务器接口 onUpload : insertUpload     

uploadify struts2实现图片上传

uploadify是来自国外的一款优秀的jQuery上传插件,主要功能是批量上传文件,带进度显示. 包括两个版本,一个是Flash的 一个是HTML5的.下面介绍Flash版本如何使用 1.下载 Uploadify Zip 2.解压缩包并上传下列文件到您的网站上的一个文件夹: jquery.uploadify.min.js uploadify.css uploadify-cancel.png uploadify.swf 3.在您使用uploadify页面也不要忘了引入jQuery库 4.在页面引

kindeditor图片上传 struts2实现

一.kindeditor以及struts2部署搭建不再赘述,如需要请参考kindeditor使用方法 Struts2框架搭建 二.kindeditor图片上传所依赖jar包在kindeditor\jsp\lib下有 三.以下列出部分核心代码,如需要全部源码可点击下载(待上传) JSP <textarea id="editor_id" name="content" style="width:950px;height:300px;"> 这

struts2+ckeditor配置图片上传

又是一个漫漫长夜. 公司的编辑器坏了,用的是百度编辑器,上传图片的网址被框架给拦截了,我们本地怎么测试都没问题,放到服务器就这样了.和老李找了半天,疯了,没原因的. 笔者以前用过jsp+ckeditor,觉得里面上传功能挺好用,于是想出这个法子,把网站的编辑器换掉. 用的是最新的版本的,4点几的.很有wordpress的感觉,不知道是不是一家的.先预览一下: 代码: package action; import java.io.File; import java.io.FileInputStre

Struts2单文件上传原理及示例

一.文件上传的原理 表单元素的enctype属性指定的是表单数据的编码方式,该属性有3个值: 1.application/x-www-form-urlencoded:这是默认编码方式,它只处理表单域里的value属性值,采用这种编码方式的表单会将表单域的值处理成URL编码方式. 2.multipart/form-data:这种编码方式的表单会以二进制流的方式来处理表单数据,这种编码方式会把文件域指定文件的内容也封装到请求参数里. 3.text/plain:这种方式主要适用于直接通过表单发送邮件的

CKEditor图片上传实现详细步骤(使用Struts 2)

本人使用的CKEditor版本是3.6.3.CKEditor配置和部署我就不多说. CKEditor的编辑器工具栏中有一项"图片域",该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片上传. "预览"中有一大堆鸟语,看得很不爽.可以打开ckeditor/plugins/image/dialogs/image.js文件,搜索"b.config.image_previewText"就能找到这段鸟语了,(b.config.image_prev

java web图片上传和文件上传

图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多,但底层的实现都是文件的读写操作. 注意事项 1.form表单一定要写属性enctype="multipart/form-data" 2.为了能保证文件能上传成功file控件的name属性值要和你提交的控制层变量名一致, 例如空间名是file那么你要在后台这样定义 private File file; //file控件名 private String fileContentType;//图

【SSH网上商城项目实战13】Struts2实现文件上传功能

上一节我们做完了添加和更新商品的功能,这两个部分里有涉及到商品图片的上传,并没有详细解说.为此,这篇文章详细介绍一下Struts2实现文件上传的功能. 1. 封装文件信息 我们首先得有一个Model来封装文件的信息,这个Model里需要有三个属性:文件.文件类型和文件名.针对我们要传的图片,我们新建一个Model如下: public class FileImage { private File file; private String contentType; private String fi

struts2 File标签上传文件

1.action.class private File pictureType; private String pictureTypeContentType; private String pictureTypeFileName; public String editType() throws IOException{ Type t=typeService.find(Type.class, id); System.out.println("id="+id); System.out.pr