JQuery批量上传插件Uploadify并传参数（二）新版本

来源：互联网发布：pc蛋蛋牛人算法编辑：程序博客网时间：2024/05/05 06:08

Uploadify是一个Jquery框架下处理批量文件上传的插件，支持多种服务器端软件。

官网：http://www.uploadify.com/

文档：http://www.uploadify.com/documentation/

今天根据文档写了个批量上传的的功能..

下面直接进入主题：

界面效果：

界面代码：

Html代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Uploadify上传</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" href="uploadify/uploadify.css" type="text/css"></link>
<script type="text/javascript" src="uploadify/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
src="uploadify/jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#file_upload").uploadify({
'height' : 27,
'width' : 80,
'buttonText' : '浏览',
'swf' : '<%=path%>/uploadify/uploadify.swf',
'uploader' : '<%=path%>/servlet/UploadifySerlet',
'auto' : false,
'fileTypeExts' : '*.xls',
'formData' : {'userName':'','qq':''},
'onUploadStart' : function(file) {
//校验
var name=$('#userName').val();
if(name.replace(/\s/g,'') == ''){
alert("名称不能为空！");
return false;
}
//校验
var qq=$('#qq').val();
if(qq.replace(/\s/g,'') == ''){
alert("QQ不能为空！");
return false;
}
$("#file_upload").uploadify("settings", "formData", {'userName':name,'qq':qq});
//$("#file_upload").uploadify("settings", "qq", );
}
});
});
</script>
</head>
<body>
名称: <input type="text" id="userName" name="userName" value="妞见妞爱">
<br>
QQ: <input type="text" id="qq" name="qq" value="609865047">
<br>
<input type="file" name="uploadify" id="file_upload" />
<hr>
<a href="javascript:$('#file_upload').uploadify('upload','*')">开始上传</a> 
<a href="javascript:$('#file_upload').uploadify('cancel', '*')">取消所有上传</a>
</body>
</html>

关于各个参数的介绍，网上也有很多。。我们也可以在 jquery.uploadify-3.1.js 中找到。

Js代码

var settings = $.extend({
// Required Settings
id : $this.attr('id'), // The ID of the DOM object
swf : 'uploadify.swf', // The path to the uploadify SWF file
uploader : 'uploadify.php', // The path to the server-side upload script
// Options
auto : true, // Automatically upload files when added to the queue
buttonClass : '', // A class name to add to the browse button DOM object
buttonCursor : 'hand', // The cursor to use with the browse button
buttonImage : null, // (String or null) The path to an image to use for the Flash browse button if not using CSS to style the button
buttonText : 'SELECT FILES', // The text to use for the browse button
checkExisting : false, // The path to a server-side script that checks for existing files on the server
debug : false, // Turn on swfUpload debugging mode
fileObjName : 'Filedata', // The name of the file object to use in your server-side script
fileSizeLimit : 0, // The maximum size of an uploadable file in KB (Accepts units B KB MB GB if string, 0 for no limit)
fileTypeDesc : 'All Files', // The description for file types in the browse dialog
fileTypeExts : '*.*', // Allowed extensions in the browse dialog (server-side validation should also be used)
height : 30, // The height of the browse button
method : 'post', // The method to use when sending files to the server-side upload script
multi : true, // Allow multiple file selection in the browse dialog
formData : {}, // An object with additional data to send to the server-side upload script with every file upload
preventCaching : true, // Adds a random value to the Flash URL to prevent caching of it (conflicts with existing parameters)
progressData : 'percentage', // ('percentage' or 'speed') Data to show in the queue item during a file upload
queueID : false, // The ID of the DOM object to use as a file queue (without the #)
queueSizeLimit : 999, // The maximum number of files that can be in the queue at one time
removeCompleted : true, // Remove queue items from the queue when they are done uploading
removeTimeout : 3, // The delay in seconds before removing a queue item if removeCompleted is set to true
requeueErrors : false, // Keep errored files in the queue and keep trying to upload them
successTimeout : 30, // The number of seconds to wait for Flash to detect the server's response after the file has finished uploading
uploadLimit : 0, // The maximum number of files you can upload
width : 120, // The width of the browse button

上面是默认的设置。。。

服务器端代码：

Java代码

package com.yangpan.uploadify;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.Random;
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.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
public class UploadifySerlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
//上传文件的保存路径
protected String configPath = "attached/";
protected String dirTemp = "attached/temp/";
protected String dirName = "file";
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
//文件保存目录路径
String savePath = this.getServletContext().getRealPath("/") + configPath;
// 临时文件目录
String tempPath = this.getServletContext().getRealPath("/") + dirTemp;
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");
String ymd = sdf.format(new Date());
savePath += "/" + ymd + "/";
//创建文件夹
File dirFile = new File(savePath);
if (!dirFile.exists()) {
dirFile.mkdirs();
}
tempPath += "/" + ymd + "/";
//创建临时文件夹
File dirTempFile = new File(tempPath);
if (!dirTempFile.exists()) {
dirTempFile.mkdirs();
}
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(20 * 1024 * 1024); //设定使用内存超过5M时，将产生临时文件并存储于临时目录中。
factory.setRepository(new File(tempPath)); //设定存储临时文件的目录。
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
try {
List items = upload.parseRequest(request);
Iterator itr = items.iterator();
String name = "";
String qq = "";
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
String fileName = item.getName();
long fileSize = item.getSize();
if (!item.isFormField()) {
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
try{
File uploadedFile = new File(savePath, newFileName);
/*
* 第一种方法
*
* 好处：一目了然..简单啊...
* 弊端：这种方法会导致上传的文件大小比原来的文件要大
*
* 推荐使用第二种
*/
//item.write(uploadedFile);
//--------------------------------------------------------------------
//第二种方法
OutputStream os = new FileOutputStream(uploadedFile);
InputStream is = item.getInputStream();
byte buf[] = new byte[1024];//可以修改 1024 以提高读取速度
int length = 0;
while( (length = is.read(buf)) > 0 ){
os.write(buf, 0, length);
}
//关闭流
os.flush();
os.close();
is.close();
System.out.println("上传成功！路径："+savePath+"/"+newFileName);
out.print("1");
}catch(Exception e){
e.printStackTrace();
}
}else {
String filedName = item.getFieldName();
if (filedName.equals("userName")) {
name = item.getString();
}else {
qq = item.getString();
}
System.out.println("FieldName："+filedName);
System.out.println("String："+item.getString("UTF-8"));//避免中文乱码
//System.out.println("String()："+item.getString(item.getName()));
System.out.println("===============");
}
}
} catch (FileUploadException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
out.flush();
out.close();
}
}

WEB.XML

Xml代码

<servlet>
<servlet-name>UploadifySerlet</servlet-name>
<servlet-class>
com.yangpan.uploadify.UploadifySerlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UploadifySerlet</servlet-name>
<url-pattern>/servlet/UploadifySerlet</url-pattern>
</servlet-mapping>

基本设置

swf：主要Flash文件路径，默认uploadify.swf，如果同调用文件在同一不目录下可以忽略

uploader：后台处理程序路径，默认uploadify.php

postData：传递参数，默认{}

auto：是否允许自动上传文件，默认false

method：传递参数方式，默认post

外观设置

width：按钮宽度，默认120

height：按钮高度，默认30

buttonClass：按钮样式设置，如：样式为.btnClass{color:red;}

buttonCursor：鼠标移入时指针样式，默认hand，（注：设置后不知道怎么显示）

buttonImage：按钮显示图片地址，默认false，（注：必须是高度2倍，包含两个按钮图片，上默认、下鼠标移入，IE9）

buttonText：按钮显示文字信息，默认SELECT FILES，（注：3.0.0版本支持中文）

cancelImage：取消选中文件图片，默认uploadify-cancel.png

fileTypeDesc：选择文件时文件类型提示，默认All Files (*.*)

fileTypeExts：选择文件时文件类型限制，默认*.*，（注：如果fileTypeDesc和fileTypeExts同时设置，则显示组合，如：All Files (*.*) (*.*)

多个类型如：“*.JPG;*.GIF;*.PNG;*.BMP”）

操作设置

queueID：上传队列容器ID，默认false

removeCompleted：是否删除容器内已经上传完毕文件，默认true

removeTimeout：删除容器内已经上传完毕文件延迟时间，单位s，默认3

fileSizeLimit：设置允许上传文件大小，单位k，默认0不限制

multi：是否支持多文件同时上传，默认false

queueSizeLimit：限制一次上传文件个数，即容器内最多文件个数，默认999

simUploadLimit：允许同时上传文件个数，同时执行，默认1，（注：3.0.0测试版注释此参数）

调试设置

debug：是否显示调试框，默认false

checkExisting：检查待上传文件是否存在程序，默认uploadify-check-existing.php

其他设置

fileObjName：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据，默认Filedata，（作用不明）

requeueErrors：未知，默认false

preventCaching：未知，默认true

progressData：未知，默认percentage

successTimeout：未知，默认30

transparent：未知，默认true

uploadLimit：未知，默认999

uploaderType：未知，默认html5

langFile：错误提示文件，可以忽略

id：当前操作的ID编码，默认jQuery(this).attr('id')，可以忽略。

onClearQueue: function () {}：未知

onDialogOpen: function () {}：打开选择文件窗口

onDialogClose: function () {}：关闭选择文件窗口

onInit: function () {}：初始化

onQueueComplete: function () {}：全部文件上传结束

onSelectError: function () {}：选择文件：选择错误

onSelect: function () {}：单个文件：选择文件，每选中一个文件都执行一次

onSWFReady: function () {}：未知

onUploadCancel: function () {}：未知

onUploadComplete: function () {}：单个文件上传结束，注意：最后一个文件结束在全部结束后

onUploadError: function () {}：上传文件错误/取消已选择文件

onUploadProgress: function () {}：单个文件：上传过程中

demo 下载，有问题大家可以一起讨论啊。。。。。

uploadify.rar (765.9 KB)
下载次数: 771

查看图片附件

传参数示例:$("#file_upload").uploadify("settings", "formData", {'userName':name,'qq':qq});

源地址:http://yangpanwww.iteye.com/blog/1550508

0 0