JQuery_ 文件下传_Uploadify插件 _Web前端

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>