`
lcwyiyun
  • 浏览: 11879 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

JQuery_ 文件上传_Uploadify插件

阅读更多
        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" />
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="javascript:$('#fileInput').uploadifyUpload();">开始上传</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<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>    
分享到:
评论
1 楼 ms_lzt 2012-10-13  
不错!好例子

相关推荐

    jquery文件上传插件 jquery.uploadify.js

    《jQuery文件上传插件jQuery.uploadify.js:跨越浏览器限制的智能解决方案》 在Web开发中,文件上传功能是一项常见的需求,而jQuery.uploadify.js是一款高效且用户友好的文件上传插件,尤其对于需要兼容多种浏览器...

    jQuery_Uploadify_3.0_上传插件使用说明

    ### 使用jQuery Uploadify 3.0进行文件上传的详尽指南 #### 一、简介 jQuery Uploadify是一款基于Flash技术的文件上传插件,旨在简化前端文件上传过程,提供友好的用户界面。此插件支持多种文件上传方式,并且可以...

    Blog.rar_Uploadify_java jquery uploadfy_java 批量上传_uploadify java

    总之,本项目展示了如何将前端的jQuery Uploadify插件与Java后端相结合,实现一个高效且用户友好的批量文件上传功能。对于想要学习这一领域的开发者来说,这是一个很好的实践案例。通过深入研究此项目,你可以了解到...

    jquery文件上传插件 jquery.uploadify.js 不支持IE10现在经过修改

    在IT行业中,jQuery Uploadify.js是一款非常流行的前端文件上传插件,它允许用户通过异步方式上传文件到服务器,提供了一种友好的用户体验。然而,随着浏览器版本的更新,一些较旧的插件可能不再兼容新的浏览器,...

    JQuery_uploadify_struts2_jsp__ajax多文件上传

    标题中的"JQuery_uploadify_struts2_jsp__ajax多文件上传"涉及到的是一个使用jQuery、uploadify插件、Struts2和JSP技术实现的AJAX多文件上传功能。这个功能允许用户在不刷新页面的情况下,上传多个文件到服务器。 ...

    jquery_uploadify实现的下载进度条

    首先,jQuery Uploadify是基于jQuery的一个插件,它支持多文件上传、预览、取消上传、进度条显示等功能。其核心在于通过Flash技术实现实时反馈上传进度,从而让用户了解文件上传的状态。 在开始之前,确保你已经...

    jquery上传插件uploadify+php完美实现强大的文件上传功能实例+程序

    总之,结合jQuery Uploadify插件和PHP,我们可以构建一个功能强大、易于使用的文件上传系统。通过理解Uploadify的工作原理和PHP的文件处理机制,我们可以定制满足特定需求的上传功能,同时保证系统的安全性和稳定性...

    .net jQuery上传插件Uploadify 文件 上传 实例,简单易懂

    在.NET开发中,文件上传是一项常见的任务,而jQuery Uploadify插件则为这一过程提供了便捷的解决方案。Uploadify是一款基于JavaScript和Flash的文件上传组件,它允许用户通过拖拽或选择文件的方式,实现多文件同时...

    jquery插件uploadify

    接下来是`jquery.uploadify.js`和`jquery.uploadify.min.js`,这两个文件分别是未压缩和压缩版本的Uploadify插件主脚本。它们实现了文件选择、上传逻辑以及与服务器端的通信。`jquery.uploadify.min.js`更适合生产...

    jquery 上传插件Uploadify-v3.0.0.zip

    总之,jQuery Uploadify插件v3.0.0是一个强大且灵活的文件上传解决方案,它简化了前端与后端的文件交互,提升了用户体验。通过理解和掌握其配置与用法,开发者可以在项目中轻松实现高效的文件上传功能。

    jquery uploadify插件多文件上传(带代码)

    总的来说,jQuery Uploadify是一个强大且易于使用的多文件上传解决方案,它可以帮助开发者轻松实现文件上传功能,同时提供了丰富的定制选项以满足不同的需求。无论你是新手还是经验丰富的开发者,都能从这个插件中...

    批量上传文件(asp.net C#,Jquery,uploadify)

    使用Jquery的上传插件Uploadify,提供upload.ashx的C#源码和VB源码,方便直接使用,因为不会VB,所以只使用C#做了上传的示例。在web.config中配置上传的文件夹路径! 示例的主要功能是创建一个新的文件夹并将文件...

    jquery.uploadify-v2.1.4[修正版]

    在Web开发中,上传功能是不可或缺的一部分,而jQuery.uploadify插件以其强大的功能和易用性深受开发者喜爱。这个"jquery.uploadify-v2.1.4[修正版]"正是基于官方的v2.1.4版本进行了一次关键的优化,特别针对中文支持...

    jsp调用uploadify文件上传插件实现文件快速上传.rar

    jsp使用uploadify插件实现文件上传的示例,测试时将uploadify 直接导入myeclipse就能用了。  uploadify是一个与jquery和flash结合实现的上传程序,界面挺漂亮,用起来也方便,不过浏览器需要安装有Flash插件,好像...

    jquery-java-ajax-uploadify上传文件

    在IT行业中,前端开发经常会遇到文件上传的需求,而"jquery-java-ajax-uploadify上传文件"是一个经典的方法,结合了JavaScript库jQuery、Ajax技术以及Uploadify插件来实现这一功能。在这个过程中,我们将深入探讨...

    Uploadify-3.2.1 jQuery文件上传插件

    Uploadify是一款基于jQuery的文件上传插件,版本为3.2.1,它极大地简化了在Web应用中实现异步无刷新多文件上传的过程。...通过研究这些内容,开发者可以快速理解和使用Uploadify插件,实现高效、便捷的文件上传功能。

Global site tag (gtag.js) - Google Analytics