`
yangpanwww
  • 浏览: 624645 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

JQuery批量上传插件Uploadify并传参数(二)

阅读更多

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

 

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

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

 

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

 

下面直接进入主题:

 

界面效果:

 



 

 界面代码:

 

<%@ 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>&nbsp;   
        <a href="javascript:$('#file_upload').uploadify('cancel', '*')">取消所有上传</a> 
	</body>
</html>

 

  关于各个参数的介绍,网上也有很多。。我们也可以在 jquery.uploadify-3.1.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
					

 

 上面是默认的设置。。。

 

  服务器端代码:

 

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

 

<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 下载,有问题大家可以一起讨论啊。。。。。

  • 大小: 24.2 KB
分享到:
评论
13 楼 dingding300 2016-01-06  
dingding300 写道
'simUploadLimit'


批量不行





12 楼 dingding300 2016-01-06  
'simUploadLimit'


批量不行
11 楼 wlkfec 2014-05-13  
写法基本一样,但是为什么点击开始上传为什么一点反应也没有?
10 楼 uuid2010 2013-11-21  
raincat 写道
感谢!这句的"formData"是重点,网上好多资料都误导人,你的这个才能post变量数据到后台。

$("#file_upload").uploadify("settings", "formData", {'userName':name,'qq':qq});  


FormData是后台通过这个参数拿到File文件。但是新版的java可以便里Form元素,这个参数就不是太重要!

可以试试Stream 上传插件
Stream 是解决不同浏览器上传文件的插件,是Uploadify的Flash版和Html5版的结合!
http://www.twinkling.cn/
9 楼 raincat 2013-10-20  
感谢!这句的"formData"是重点,网上好多资料都误导人,你的这个才能post变量数据到后台。

$("#file_upload").uploadify("settings", "formData", {'userName':name,'qq':qq});  
8 楼 yangpanwww 2013-03-30  
huaxiafu 写道
 
大哥,在网上找了这么多实例,只找到你的可以用,真得赞美你一番,你真好人一个!



    客气客气
7 楼 huaxiafu 2013-03-30  
 
大哥,在网上找了这么多实例,只找到你的可以用,真得赞美你一番,你真好人一个!
6 楼 huaxiafu 2013-03-30  
 
大哥,在网上找了这么多实例,只找到你的可以用,真得赞美你一番,你真好人一个!
5 楼 smilease 2012-10-10  
jackyrong 写道
smilease 写道
smilease 写道
有个问题,名称为空时,虽然有提示信息,但是上传操作仍然会执行,不知道楼主有没有什么好办法

自己解决了,把开始上传的href触发上传操作改成了onclick函数,检验是否为空的操作在onclick函数中进行


能否给个代码段看下?谢谢


我写在我的博客里了
http://smilease.iteye.com/blog/1693898
4 楼 jackyrong 2012-10-10  
smilease 写道
smilease 写道
有个问题,名称为空时,虽然有提示信息,但是上传操作仍然会执行,不知道楼主有没有什么好办法

自己解决了,把开始上传的href触发上传操作改成了onclick函数,检验是否为空的操作在onclick函数中进行


能否给个代码段看下?谢谢
3 楼 smilease 2012-10-10  
smilease 写道
有个问题,名称为空时,虽然有提示信息,但是上传操作仍然会执行,不知道楼主有没有什么好办法

自己解决了,把开始上传的href触发上传操作改成了onclick函数,检验是否为空的操作在onclick函数中进行
2 楼 smilease 2012-10-08  
有个问题,名称为空时,虽然有提示信息,但是上传操作仍然会执行,不知道楼主有没有什么好办法
1 楼 jackyrong 2012-08-22  
想问下,我的是struts2+uploadfit 3.1,文件能上传成功,
上传的时候,另外用formdata传递了表单的其他参数到sturts2的后台,
struts2的后台也能接受到文件,只不过struts2返回的是一个json(把表单的
另外的传递的参数原样子以JSON输出到前端而已,在uploadfiy
中,DEBUG模式下,也看到有:
File ID: SWFUpload_0_0 Response Received: true Data: {"version":"fdgfg"}

的字样,但是用:
'onUploadSuccess'  : function(event, ID, fileObj, response, data) {
  var mp3 = eval('(' + data + ')'); 
alert(data);
   alert('The file ' + fileObj.name + ' was successfully uploaded with a response of ' + response + ':' + data);
 
  }

打印出来的data和response都是空的?

相关推荐

    JQuery批量上传插件Uploadify使用详解及参数说明.docx

    **jQuery批量上传插件Uploadify**是一款非常实用的前端文件上传工具,它允许用户通过Flash技术实现批量、异步的文件上传。Uploadify提供了一系列可配置的参数,使其能够适应各种上传需求,同时具备良好的用户体验。 ...

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

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

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

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

    jQuery上传插件uploadify

    **jQuery上传插件Uploadify详解** Uploadify是一款基于...总之,jQuery上传插件Uploadify是提高Web应用中文件上传体验的利器,通过其丰富的参数设置和事件处理,开发者可以定制出满足各种需求的文件上传解决方案。

    JQuery上传插件Uploadify使用详解

    JQuery Uploadify插件是一个基于JQuery的文件上传组件,它提供了一种用户友好的界面,支持多文件选择、上传进度显示以及批量上传等功能。在ASP.NET环境中使用Uploadify,你需要按照以下步骤进行配置和编码。 首先,...

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

    本实例将探讨如何利用jQuery上传插件Uploadify与PHP技术来构建一个强大的文件上传系统。Uploadify是一款广泛使用的前端插件,它使得文件上传过程更加直观、用户友好,并且支持批量上传和自定义样式,极大地提升了...

    jquery uploadify实现批量上传

    在网页开发中,jQuery Uploadify是一个非常流行的插件,它允许用户实现批量文件上传功能,大大提升了用户体验。本文将深入探讨如何使用jQuery Uploadify来实现这一功能,以及它的工作原理和核心配置。 jQuery ...

    JQuery uploadify 实现批量上传例子

    而Uploadify则是JQuery的一个插件,它提供了一种优雅的方式来实现文件的上传功能,包括单个文件上传和批量上传。本篇文章将详细介绍如何使用JQuery uploadify实现批量上传功能,并探讨其核心原理和相关配置。 首先...

    jquery uploadify批量上传中文版

    在Web开发中,文件上传是一项常见的功能,而jQuery Uploadify插件因其简洁的API和强大的功能,成为众多开发者首选的批量上传解决方案。尤其是其支持中文版本,更是方便了中文用户进行操作。本文将深入解析jQuery ...

    JQuery上传插件Uploadify使用详解.pdf

    jQuery Uploadify 是一款基于jQuery的文件上传插件,它提供了用户友好的界面,支持多文件选择、上传进度显示以及批量上传等功能。这个插件适用于那些希望在网页中实现复杂文件上传功能的开发者。Uploadify 通过Flash...

    uploadify批量上传实例

    - **初始化Uploadify**:使用jQuery选择器找到目标元素,并调用`uploadify()`方法进行初始化,传入配置参数,如上传URL、文件类型限制、队列大小等。 - **事件监听**:可以通过设置事件处理器来监听文件选择、上传...

    MVC JQuery uploadIfy 批量上传并写入数据库信息

    uploadIfy是基于JQuery的一个文件上传插件,它支持单个和批量文件上传,具有进度条显示、预览、错误处理等功能。在我们的案例中,uploadIfy提供了用户友好的界面,使得用户可以方便地选择多个文件进行上传,并实时...

    Blog.rar_Uploadify_java jquery uploadfy_java 批量上传_uploadify java

    批量上传_uploadify_java”提供了一个基于jQuery插件Uploadify和Java后端实现批量上传的示例,非常适合开发者学习和参考。 首先,Uploadify是一款流行的jQuery插件,它允许用户通过拖放或选择文件按钮进行文件上传...

    JQuery_ 文件上传_Uploadify插件

    Uploadify是基于jQuery的插件,它利用Flash的FileReference对象实现了文件选择和上传的异步操作,同时支持批量上传,大大提升了用户体验。 **2. Uploadify的安装与配置** 首先,你需要在项目中引入jQuery库和...

    asp.net 文件批量上传demo[jqueryUploadify]

    在这个场景下,`jQuery Uploadify`插件是一个非常实用的工具,它为ASP.NET开发者提供了一个简单易用的前端文件上传解决方案。本文将详细探讨如何在ASP.NET环境中结合jQuery Uploadify实现文件和图片的批量上传。 ...

    Asp.net 上传 Jquery.Uploadify 实例

    在本文中,我们将深入探讨如何在Asp.net环境中利用Jquery.Uploadify插件实现文件的批量上传功能。Asp.net是一种强大的Web应用程序框架,而Jquery.Uploadify是jQuery库的一个扩展,专门用于处理文件上传,它允许用户...

    jquery uploadify

    jQuery Uploadify插件为开发者提供了一个强大的解决方案,它允许用户批量上传文件,并且在上传过程中显示进度条,极大地提升了用户体验。本文将深入探讨jQuery Uploadify的工作原理、主要功能以及如何在项目中应用。...

Global site tag (gtag.js) - Google Analytics