码迷,mamicode.com
首页 > Web开发 > 详细

uploadify struts2实现图片上传

时间:2015-03-04 22:43:17      阅读:232      评论:0      收藏:0      [点我收藏+]

标签: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、在页面引入如下文件

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

5、页面添加file input

<input type="file" name="file_upload" id="file_upload" />

6、初始化uploadify

$(function() {
    $(‘#file_upload‘).uploadify({
        ‘swf‘      : ‘uploadify.swf‘,
        ‘uploader‘ : ‘fileUploadAction.action‘
        // Put your options here
    });
});

7、最终页面应该像如下这样

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>uploadify</title>
		<script type="text/javascript" src="uploadify/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>
		<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
	</head>
	<body>
		<input type="file" name="file_upload" id="file_upload" />
	</body>
	
	<script type="text/javascript">
		$(function() {
			$(‘#file_upload‘).uploadify( {
				‘swf‘ : ‘uploadify/uploadify.swf‘,
				‘uploader‘ : ‘fileUploadAction.action‘, //处理上传文件Action路径 
				‘fileObjName‘ : ‘file‘,        //文件对象
				‘buttonText‘   : ‘选择文件‘,   //按钮显示文字 
			});
		});
	</script>
</html>

更多uploadify属性请参考http://www.uploadify.com/documentation/


处理上传文件Action省略,需要的可以下载源码:download


效果如图:

技术分享


作者:itmyhome



uploadify struts2实现图片上传

标签:uploadify   struts2   图片上传   

原文地址:http://blog.csdn.net/itmyhome1990/article/details/44062283

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!