uploadify的官方网站
http://www.uploadify.com,文档以及插件均可从此网站下载到。
示例代码如下:
1.JSP文件:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文件上传演示</title>
<link href="css/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery1.6.1.js"></script>
<script language="javascript" src="js/swfobject.js"></script>
<script language="javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript">
function showResult(){//删除显示的上传成功结果
$("#result").html("");
}
$(document).ready(function() {
$('#fileInput').uploadify({
'uploader': 'js/swf/uploadify.swf',
'script': 'uploadifyAction.action', //指定服务端处理类的入口
'folder': 'uploadFile',
'fileDataName': 'fileInput', //和input的name属性值保持一致就好,Struts2就能处理了
'queueID': 'fileQueue',
'auto': false,//是否选取文件后自动上传
'multi': true,//是否支持多文件上传
'simUploadLimit' : 5,//每次最大上传文件数
//'buttonImg': 'images/btn.gif',//按钮上的图片
'buttonText': 'File',//按钮上的文字
'onComplete': function (event, queueID, fileObj, response, data) {
$("#result").html(response);//显示上传成功结果
//setInterval("showResult()",2000);//两秒后删除显示的上传成功结果
}
});
});
</script>
</head>
<body>
<input type="file" name="fileInput" id="fileInput" />
<a href="javascript:$('#fileInput').uploadifyUpload();">开始上传</a>
<div id="result"></div>
<a href="javascript:$('#fileInput').uploadifyClearQueue();" >取消上传队列</a>
<div id="fileQueue"></div>
<!--显示结果-->
</body>
</html>
属性解说:
uploader: swf文件的存放位置,默认为uploadify.swf。
这个属性一定要配置好,如果不配置好,插件就会去寻找与jsp同级的一个叫做uploadify.swf的文件,如果找不到,上传按钮处会显示一片空白。
script: 'uploadifyAction.action',指定服务端处理类的入口
fileDataName:网页中的文件选择标签
auto:是否选取文件之后自动上传
buttonImg:按钮图片(不推荐使用),这是在页面加载完成之后,flash再从网页中取得图片,将图片填充到swf里面,所以
按钮都会在页面刷新好以后几秒钟才加载完成。
buttonText:(推荐使用),选择文件按钮就是一个黑色按钮,如果对样式没什么要求的话就用这个属性,但是只能使用英文,用中文的话不能正常显示。
2.后台处理程序(UploadFileDemoAction.java)
package com.sun.demoAction;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class UploadFileDemoAction extends ActionSupport {
private static final int BUFFERED_SIZE = 4 * 1024;
private File fileInput;
private String fileInputFileName;
public File getFileInput() {
return fileInput;
}
public void setFileInput(File fileInput) {
this.fileInput = fileInput;
}
public String getFileInputFileName() {
return fileInputFileName;
}
public void setFileInputFileName(String fileInputFileName) {
this.fileInputFileName = fileInputFileName;
}
public void uploadFile() {
HttpServletResponse response = null;
try {
System.out.println("uploadFile:");
System.out.println("上传文件的位置:" + fileInput.getAbsolutePath());
System.out.println("上传文件的名称:" + fileInputFileName);
// 将文件存到D盘下
File imageFile = new File("D:\\" + fileInputFileName);
copy(fileInput, imageFile);
// 返回成功信息
response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
response.getWriter().println("OK,FIlE:" + fileInputFileName + "");
} catch (Exception e) {
try {
response = ServletActionContext.getResponse();
response.getWriter().println("Error,FIlE:" + fileInputFileName + "");
} catch (IOException e1) {
e1.printStackTrace();
}
}
}
private static void copy(File src, File target) {
InputStream in = null;
OutputStream out = null;
try {
in = new BufferedInputStream(new FileInputStream(src), BUFFERED_SIZE);
out = new BufferedOutputStream(new FileOutputStream(target), BUFFERED_SIZE);
byte[] bs = new byte[BUFFERED_SIZE];
int i;
while ((i = in.read(bs)) > 0) {
out.write(bs, 0, i);
}
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
if (in != null)
in.close();
if (out != null)
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
Action里面的属性跟用struts2上传文件类似,也是文件选择框fileInput以及fileInputFileName的get/set方法。
3. struts2配置文件(struts.xml)
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<constant name="struts.i18n.encoding" value="utf-8"></constant>
<!-- 设置最大上传的大小 -->
<constant name="struts.multipart.maxSize" value="4000194304"/>
<package name="uploadfile" namespace="/" extends="struts-default">
<action name="uploadifyAction" class="com.sun.demoAction.UploadFileDemoAction" method="uploadFile">
</action>
</package>
</struts>
分享到:
相关推荐
jQuery_Uploadify_3.0_上传插件使用说明
jquery文件上传插件 jquery.uploadify.js 不支持IE10现在经过修改,已经支持IE6、IE7、IE8、IE9、IE10、IE11.zip
jquery文件上传插件 jquery.uploadify.js 不支持IE10现在经过修改,已经支持IE6、IE7、IE8、IE9、IE10、IE11.zip
uploadify-h5上传插件,解决uploadify插件中需要下载flash的问题
jquery上传插件uploadify+php完美实现强大的文件上传功能实例+程序_【PHP】.rar
Uploadify-3.2.1 jQuery文件上传插件,使用uploadify组件可以实现异步无刷新多文件上传功能。
jsp使用uploadify插件实现文件上传的示例,测试时将uploadify 直接导入myeclipse就能用了。 uploadify是一个与jquery和flash结合实现的上传程序,界面挺漂亮,用起来也方便,不过浏览器需要安装有Flash插件,好像...
里面有个.net文件上传的实例,利用了jQuery上传插件Uploadify ,简单易懂,可以直接用,也可以作为开发的启发
jquery xheditor是jquery中较好的编辑器插件,而jquery.uploadify也是jquery实现文件上传很优秀的插件,本项目实例解决了两个插件文件上传的问题,对于应用学习两个插件,实现文件上传,具有很好的参考价值,同时本例子是...
资源名称:jquery上传插件Uploadify3.2 中文参考手册内容简介:上传功能在我们的程序中是经常会用到的,而传统的http上传在安全性和文件大小上都会有一定的限制,而且不能看到上传进度。今天我要给大家介绍额就是一...
jQuery上传插件Uploadify使用详解
jquery uploadify插件多文件上传(带代码) 写着挺清楚的,可以借鉴看看!
JQuery 上传插件Uploadify使用2 多文件上传
该插件是基于jQuery的,所以我们在使用之前需要引用jquery, 那么可以想象,插件的作用就在于在前台将数据提交到后台,让我们通过后台代码来保存前台传入的文件。代码使用VS2010,下载即可运行,如有问题负责调试,...
JQuery uploadify 实现文件批量上传完整例子,所有js,和uploadify插件js 都放在这个例子中
JQuery上传插件Uploadify使用示例
自己对jQuery Uploadify插件稍作整理,样式不合适可以根据自己的需要修改; 可以实现多文件上传,同时显示上传进度条和百分比,上传完毕后将统计上传文件的总数量、文件总大小和上传速度等; 可以显示上传文件的类型...
jQuery上传文件的插件,内部利用flash上传。参数和方法丰富。
使用Jquery.uploadify上传文件。...jquery有很多插件,其中也有不少上传文件的插件,像ajaxfileupload.js、uploadify.js,不过网上的例子几乎全是php的,很郁闷,研究了半天,终于把uploadify用jsp版本弄出来了