国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > php开源 > php教程 > uploadify struts2实现图片上传

uploadify struts2实现图片上传

来源:程序员人生   发布时间:2015-04-11 08:58:54 阅读次数:3350次
uploadify是来自国外的1款优秀的jQuery上传插件,主要功能是批量上传文件,带进度显示。

包括两个版本,1个是Flash的 1个是HTML5的。下面介绍Flash版本如何使用


1、下载 Uploadify Zip


2、解紧缩包并上传以下文件到您的网站上的1个文件夹:

     jquery.uploadify.min.js

     uploadify.css

     uploadify-cancel.png

     uploadify.swf


3、在您使用uploadify页面也不要忘了引入jQuery库


4、在页面引入以下文件

<script type="text/javascript" src="uploadify/jquery⑴.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⑻"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>uploadify</title> <script type="text/javascript" src="uploadify/jquery⑴.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

转载请注明出处:http://blog.csdn.net/itmyhome1990/article/details/44062283



生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生