使用uploadify进行上传

最新推荐文章于 2018-12-28 14:26:13 发布

w809026418

最新推荐文章于 2018-12-28 14:26:13 发布

阅读量7.1k

点赞数

分类专栏： ASP.NET MVC JQuery 文章标签： string javascript file null import function

JQuery 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

ASP.NET MVC

14 篇文章 0 订阅

订阅专栏

Html代码

<html>
<bead>
<link href="${cssPath}/uploadify.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript"
src="${jsPath}/jquery-1.3.2.js"></script>
<script type="text/javascript" src="${jsPath}/uploadify/swfobject.js"></script>
<script type="text/javascript" src="${jsPath}/uploadify/jquery.uploadify.v2.1.0.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader' : '${jsPath}/uploadify/uploadify.swf',
'script' : '${actionPath}/servlet/Upload',
'cancelImg' : '${cssPath}/images/uploadify/cancel.png',
'auto' : true,
'multi' : false,
'fileExt' : '*.xls',
'fileDesc' : '请选择Execl文件（*.xls）',
'fileDataName' : 'uploadify',
'onComplete' : function(event,queueId,fileObj,response,data){
$("#message").text(response);
setInterval($('#uploadify').uploadifyClearQueue() , 2000);
}
});
});
</script>
</head>
<body>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
</body>
</html>

<html>
<bead>
<link href="${cssPath}/uploadify.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript"
	src="${jsPath}/jquery-1.3.2.js"></script>
<script type="text/javascript" src="${jsPath}/uploadify/swfobject.js"></script>
<script type="text/javascript" src="${jsPath}/uploadify/jquery.uploadify.v2.1.0.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $("#uploadify").uploadify({
        'uploader'        : '${jsPath}/uploadify/uploadify.swf',
        'script'              : '${actionPath}/servlet/Upload',
        'cancelImg'       : '${cssPath}/images/uploadify/cancel.png',
        'auto'                : true,
        'multi'                : false,
        'fileExt'		 : '*.xls',
        'fileDesc'		 : '请选择Execl文件（*.xls）',
        'fileDataName'   : 'uploadify',
        'onComplete'	 : function(event,queueId,fileObj,response,data){
            					$("#message").text(response);
            					setInterval($('#uploadify').uploadifyClearQueue() , 2000);
        				   }
    });
});
</script>
</head>
<body>
<div id="fileQueue"></div>
    <input type="file" name="uploadify" id="uploadify" />
</body>
</html>

uploader ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。
script ：后台处理程序的相对路径。默认值：uploadify.php
checkScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
method ：提交方式Post 或Get 默认为Post
scriptAccess ： flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain
folder ： 上传文件存放的目录。
queueID ： 文件队列的ID，该ID与存放文件队列的div的ID一致。
queueSizeLimit ： 当允许多文件生成时，设置选择文件的个数，默认值：999 。
multi ： 设置为true时可以上传多个文件。
auto ： 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。
fileDesc ： 这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”

fileExt ： 设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。
sizeLimit ： 上传文件的大小限制。
simUploadLimit ： 允许同时上传的个数默认值：1 。
buttonText ： 浏览按钮的文本，默认值：BROWSE 。
buttonImg ： 浏览按钮的图片的路径。
hideButton ： 设置为true则隐藏浏览按钮的图片。
rollover ： 值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。
width ： 设置浏览按钮的宽度，默认值：110。
height ： 设置浏览按钮的高度，默认值：30。
wmode ： 设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。默认值：opaque 。
cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标

上面介绍的key值的value都为字符串或是布尔类型，比较简单，接下来要介绍的key值的value为一个函数，可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。

onInit : 做一些初始化的工作。

onSelect ： 选择文件时触发，该函数有三个参数

event:事件对象。
queueID：文件的唯一标识，由6为随机字符组成。
fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。

onSelectOnce ：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：

fileCount：选择文件的总数。
filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。
filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。
allBytesTotal：所有选择的文件的总大小。

onCancel : 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同 onSelect 中的三个参数，data对象有两个属性fileCount和allBytesTotal。

fileCount：取消一个文件后，文件队列中剩余文件的个数。
allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。

onClearQueue ：当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel 中的两个对应参数。

onQueueFull ：当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。

onError ：当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参数同上，errorObj对象有type和info两个属性。

type：错误的类型，有三种‘HTTP’, ‘IO’, or ‘Security’
info：错误的描述

onOpen ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数，参数的解释同上。

onProgress ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列，在onOpen之后触发。该函数有 event、queueId、fileObj、data四个参数，前三个参数的解释同上。data对象有四个属性percentage、 bytesLoaded、allBytesLoaded、speed：

percentage：当前完成的百分比
bytesLoaded：当前上传的大小
allBytesLoaded：文件队列中已经上传完的大小
speed：上传速率 kb/s

onComplete：文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两个属性fileCount和speed

fileCount：剩余没有上传完成的文件的个数。
speed：文件上传的平均速率 kb/s
注：fileObj对象和上面讲到的有些不太一样，onComplete 的fileObj对象有个filePath属性可以取出上传文件的路径。

onAllComplete：文件队列中所有的文件上传完成后触发。该函数有event和data两个参数，data有四个属性，分别为：

filesUploaded :上传的所有文件个数。
errors ：出现错误的个数。
allBytesLoaded ：所有上传文件的总大小。
speed ：平均上传速率 kb/s

我这个HTML文件使用的是自动上传

如要进行手动上传，修改属性，自己手动调用JS

Html代码

<a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>|
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>

<a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| 
      <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>

servlet代码：

Java代码

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.FileUploadBase.SizeLimitExceededException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import com.etraveltek.lps.utils.Constants;
public class TransactionUploadServlet extends HttpServlet {
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String transactionImportTemp = (String) request.getSession()
.getServletContext().getAttribute(
Constants.TRANSACTION_IMPORT_TEMP);
// 设置上传文件最大为 3M
final long MAX_SIZE = 3 * 1024 * 1024;
// 允许上传的文件格式的列表 final
String[] allowedExt = new String[] { "xls" };
response.setContentType("text/html"); // 设置字符编码为UTF-8, 这样支持汉字显示
response.setCharacterEncoding("UTF-8");
// 实例化一个硬盘文件工厂,用来配置上传组件
DiskFileItemFactory dfif = new DiskFileItemFactory();
// 设置上传文件时用于临时存放文件的内存大小,这里是4K.多于的部分将临时存在硬盘
dfif.setSizeThreshold(4096); // 设置存放临时文件的目录,web根目录下的ImagesUploadTemp目录
File tmpFile = new File(transactionImportTemp);
if (!tmpFile.exists()) {
tmpFile.mkdirs();
}
dfif.setRepository(tmpFile);
// 用以上工厂实例化上传组件
ServletFileUpload sfu = new ServletFileUpload(dfif);
// 设置最大上传尺寸
sfu.setSizeMax(MAX_SIZE);
PrintWriter out = response.getWriter();
// 从request得到所有上传域的列表
List fileList = null;
try {
fileList = sfu.parseRequest(request);
} catch (FileUploadException e) {
// 处理文件尺寸过大异常
e.printStackTrace();
if (e instanceof SizeLimitExceededException) {
out.println("文件尺寸超过规定大小:" + MAX_SIZE + "字节<p />");
out.println("<a href=\"upload.html\" target=\"_top\">返回</a>"); //
e.printStackTrace();
return;
}
}
// 没有文件上传
if (fileList == null || fileList.size() == 0) {
out.println("请选择上传文件<p />");
out.println("<a href=\"upload.html\" target=\"_top\">返回</a>"); //
return;
}
// 得到所有上传的文件
Iterator fileItr = fileList.iterator(); // 循环处理所有文件
while (fileItr.hasNext()) {
FileItem fileItem = null;
String path = null;
long size = 0;
// 得到当前文件
fileItem = (FileItem) fileItr.next();
// 忽略简单form字段而不是上传域的文件域(<input type="text" />等)
if (fileItem == null || fileItem.isFormField()) {
continue; // 得到文件的完整路径
}
path = fileItem.getName();
// 得到文件的大小
size = fileItem.getSize();
if ("".equals(path) || size == 0) {
out.println("请选择上传文件<p />");
out.println("<a href=\"upload.html\" target=\"_top\">返回</a>"); // return;
}
// 得到去除路径的文件名
String t_name = path.substring(path.lastIndexOf("\\") + 1);
// 得到文件的扩展名(无扩展名时将得到全名)
String t_ext = t_name.substring(t_name.lastIndexOf(".") + 1);
// 拒绝接受规定文件格式之外的文件类型
int allowFlag = 0;
int allowedExtCount = allowedExt.length;
for (; allowFlag < allowedExtCount; allowFlag++) {
if (allowedExt[allowFlag].equals(t_ext)) {
break;
}
}
if (allowFlag == allowedExtCount) {
out.println("请上传以下类型的文件<p />");
for (allowFlag = 0; allowFlag < allowedExtCount; allowFlag++) {
out.println("*." + allowedExt[allowFlag]
+ "   ");
out
.println("<p /><a href=\"upload.html\" target=\"_top\">返回</a>"); // return;
}
}
// long now = System.currentTimeMillis();
// 根据系统时间生成上传后保存的文件名
// String prefix = String.valueOf(now);
// 保存的最终文件完整路径,保存在web根目录下的ImagesUploaded目录下
// String u_name = transactionImportTemp + prefix + "." + t_ext;
try { // 保存文件
fileItem.write(new File(t_name));
out.println("文件上传成功。已保存为：" + t_name + "。");
} catch (Exception e) {
e.printStackTrace();
}
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
super.doGet(req, resp);
}
private void delTempFile(String tempFilePath) {
File tempFile = new File(tempFilePath);
if (tempFile.exists() && tempFile.isDirectory()) {
File[] allFile = tempFile.listFiles();
for (File file : allFile) {
String fileName = file.getName();
String ext = fileName.substring(fileName.lastIndexOf(".") + 1);
if (ext == null || ext.trim().length() == 0) {
continue;
}
for (String tmpExt : Constants.TRANSACTION_IMPORT_TEMP_EXT) {
if (ext.equals(tmpExt)) {
file.delete();
}
}
}
}
}
public static void main(String[] args) {
new TransactionUploadServlet()
.delTempFile("D:\\tmp\\file\\TransactionImportTemp");
}
}

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.FileUploadBase.SizeLimitExceededException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import com.etraveltek.lps.utils.Constants;

public class TransactionUploadServlet extends HttpServlet {

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		String transactionImportTemp = (String) request.getSession()
				.getServletContext().getAttribute(
						Constants.TRANSACTION_IMPORT_TEMP);

		// 设置上传文件最大为 3M
		final long MAX_SIZE = 3 * 1024 * 1024;
		// 允许上传的文件格式的列表 final
		String[] allowedExt = new String[] { "xls" };

		response.setContentType("text/html"); // 设置字符编码为UTF-8, 这样支持汉字显示
		response.setCharacterEncoding("UTF-8");

		// 实例化一个硬盘文件工厂,用来配置上传组件
		DiskFileItemFactory dfif = new DiskFileItemFactory();
		// 设置上传文件时用于临时存放文件的内存大小,这里是4K.多于的部分将临时存在硬盘
		dfif.setSizeThreshold(4096); // 设置存放临时文件的目录,web根目录下的ImagesUploadTemp目录
		File tmpFile = new File(transactionImportTemp);
		if (!tmpFile.exists()) {
			tmpFile.mkdirs();
		}
		dfif.setRepository(tmpFile);

		// 用以上工厂实例化上传组件
		ServletFileUpload sfu = new ServletFileUpload(dfif);
		// 设置最大上传尺寸
		sfu.setSizeMax(MAX_SIZE);

		PrintWriter out = response.getWriter();
		// 从request得到 所有 上传域的列表
		List fileList = null;
		try {
			fileList = sfu.parseRequest(request);
		} catch (FileUploadException e) {
			// 处理文件尺寸过大异常
			e.printStackTrace();
			if (e instanceof SizeLimitExceededException) {
				out.println("文件尺寸超过规定大小:" + MAX_SIZE + "字节<p />");
				out.println("<a href=\"upload.html\" target=\"_top\">返回</a>"); //
				e.printStackTrace();
				return;
			}
		}

		// 没有文件上传
		if (fileList == null || fileList.size() == 0) {
			out.println("请选择上传文件<p />");
			out.println("<a href=\"upload.html\" target=\"_top\">返回</a>"); // 
			return;
		}

		// 得到所有上传的文件
		Iterator fileItr = fileList.iterator(); // 循环处理所有文件
		while (fileItr.hasNext()) {
			FileItem fileItem = null;
			String path = null;
			long size = 0;
			// 得到当前文件
			fileItem = (FileItem) fileItr.next();
			// 忽略简单form字段而不是上传域的文件域(<input type="text" />等)
			if (fileItem == null || fileItem.isFormField()) {
				continue; // 得到文件的完整路径
			}
			path = fileItem.getName();
			// 得到文件的大小
			size = fileItem.getSize();
			if ("".equals(path) || size == 0) {
				out.println("请选择上传文件<p />");
				out.println("<a href=\"upload.html\" target=\"_top\">返回</a>"); // return;
			}

			// 得到去除路径的文件名
			String t_name = path.substring(path.lastIndexOf("\\") + 1);
			// 得到文件的扩展名(无扩展名时将得到全名)
			String t_ext = t_name.substring(t_name.lastIndexOf(".") + 1);
			// 拒绝接受规定文件格式之外的文件类型
			int allowFlag = 0;
			int allowedExtCount = allowedExt.length;
			for (; allowFlag < allowedExtCount; allowFlag++) {
				if (allowedExt[allowFlag].equals(t_ext)) {
					break;
				}
			}
			if (allowFlag == allowedExtCount) {
				out.println("请上传以下类型的文件<p />");
				for (allowFlag = 0; allowFlag < allowedExtCount; allowFlag++) {
					out.println("*." + allowedExt[allowFlag]
							+ "&nbsp;&nbsp;&nbsp;");
					out
							.println("<p /><a href=\"upload.html\" target=\"_top\">返回</a>"); // return;
				}
			}

			// long now = System.currentTimeMillis();
			// 根据系统时间生成上传后保存的文件名
			// String prefix = String.valueOf(now);
			// 保存的最终文件完整路径,保存在web根目录下的ImagesUploaded目录下
			// String u_name = transactionImportTemp + prefix + "." + t_ext;
			try { // 保存文件
				fileItem.write(new File(t_name));
				out.println("文件上传成功。已保存为：" + t_name + "。");
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	}

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		super.doGet(req, resp);
	}

	private void delTempFile(String tempFilePath) {

		File tempFile = new File(tempFilePath);

		if (tempFile.exists() && tempFile.isDirectory()) {
			File[] allFile = tempFile.listFiles();
			for (File file : allFile) {
				String fileName = file.getName();
				String ext = fileName.substring(fileName.lastIndexOf(".") + 1);
				if (ext == null || ext.trim().length() == 0) {
					continue;
				}
				for (String tmpExt : Constants.TRANSACTION_IMPORT_TEMP_EXT) {
					if (ext.equals(tmpExt)) {
						file.delete();
					}
				}
			}
		}

	}

	public static void main(String[] args) {
		new TransactionUploadServlet()
				.delTempFile("D:\\tmp\\file\\TransactionImportTemp");
	}
}

这里还有个问题，就是要加入

commons-fileupload

commons-io

这两个包，我分别用的是commons-fileupload-1.2.2.jar、commons-io-1.4.jar这两个包，下载地址commons.apache.org ，commons-io这个包虽然没有在servlet中使用，但是没有这个包时，上传会报错

上传显示进度条，我在调试的时候，没有细看，好像是通过浏览器，查看流量（字节）来算出的百分比，而并不是我想的哪样，系统不定时的反馈给客户端数据

这些时太忙，有空在去看看

w809026418

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用uploadify进行上传

Html代码 html> bead> link href="${cssPath}/uploadify.css" rel="stylesheet" type="text/css" /> script language="javascript" type="text/javascript" src="${jsPath}/jquery-1.3.2.js">script>
复制链接

扫一扫