- 浏览: 624941 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
lry123456:
,没用啊
js 实现div里面的内容滚动,并可以通过按钮控制 -
瑞马23:
uploadifySettings is not a func ...
JQuery上传插件Uploadify并传参数(一) -
wxfcgzht:
qq_26333595 写道我下载部署运行后提示:1、 ...
dsoframer.ocx 实现在线的word编辑 -
qq_26333595:
我下载部署运行后提示:1、TypeError: word.sa ...
dsoframer.ocx 实现在线的word编辑 -
c_hualin:
jpg转换bmp后 jpg文件没发删除呢
JAVA 实现jpg/tif/bmp 等图片之间格式得互相转换
JQuery批量上传插件Uploadify并传参数(二)
Uploadify是一个Jquery框架下处理批量文件上传的插件,支持多种服务器端软件。
文档: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> <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 下载,有问题大家可以一起讨论啊。。。。。
评论
批量不行
批量不行
$("#file_upload").uploadify("settings", "formData", {'userName':name,'qq':qq});
FormData是后台通过这个参数拿到File文件。但是新版的java可以便里Form元素,这个参数就不是太重要!
可以试试Stream 上传插件
Stream 是解决不同浏览器上传文件的插件,是Uploadify的Flash版和Html5版的结合!
http://www.twinkling.cn/
$("#file_upload").uploadify("settings", "formData", {'userName':name,'qq':qq});
大哥,在网上找了这么多实例,只找到你的可以用,真得赞美你一番,你真好人一个!
客气客气
大哥,在网上找了这么多实例,只找到你的可以用,真得赞美你一番,你真好人一个!
大哥,在网上找了这么多实例,只找到你的可以用,真得赞美你一番,你真好人一个!
自己解决了,把开始上传的href触发上传操作改成了onclick函数,检验是否为空的操作在onclick函数中进行
能否给个代码段看下?谢谢
我写在我的博客里了
http://smilease.iteye.com/blog/1693898
自己解决了,把开始上传的href触发上传操作改成了onclick函数,检验是否为空的操作在onclick函数中进行
能否给个代码段看下?谢谢
自己解决了,把开始上传的href触发上传操作改成了onclick函数,检验是否为空的操作在onclick函数中进行
上传的时候,另外用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**是一款非常实用的前端文件上传工具,它允许用户通过Flash技术实现批量、异步的文件上传。Uploadify提供了一系列可配置的参数,使其能够适应各种上传需求,同时具备良好的用户体验。 ...
使用Jquery的上传插件Uploadify,提供upload.ashx的C#源码和VB源码,方便直接使用,因为不会VB,所以只使用C#做了上传的示例。在web.config中配置上传的文件夹路径! 示例的主要功能是创建一个新的文件夹并将文件...
《jQuery文件上传插件jQuery.uploadify.js:跨越浏览器限制的智能解决方案》 在Web开发中,文件上传功能是一项常见的需求,而jQuery.uploadify.js是一款高效且用户友好的文件上传插件,尤其对于需要兼容多种浏览器...
**jQuery上传插件Uploadify详解** Uploadify是一款基于...总之,jQuery上传插件Uploadify是提高Web应用中文件上传体验的利器,通过其丰富的参数设置和事件处理,开发者可以定制出满足各种需求的文件上传解决方案。
JQuery Uploadify插件是一个基于JQuery的文件上传组件,它提供了一种用户友好的界面,支持多文件选择、上传进度显示以及批量上传等功能。在ASP.NET环境中使用Uploadify,你需要按照以下步骤进行配置和编码。 首先,...
本实例将探讨如何利用jQuery上传插件Uploadify与PHP技术来构建一个强大的文件上传系统。Uploadify是一款广泛使用的前端插件,它使得文件上传过程更加直观、用户友好,并且支持批量上传和自定义样式,极大地提升了...
在网页开发中,jQuery Uploadify是一个非常流行的插件,它允许用户实现批量文件上传功能,大大提升了用户体验。本文将深入探讨如何使用jQuery Uploadify来实现这一功能,以及它的工作原理和核心配置。 jQuery ...
而Uploadify则是JQuery的一个插件,它提供了一种优雅的方式来实现文件的上传功能,包括单个文件上传和批量上传。本篇文章将详细介绍如何使用JQuery uploadify实现批量上传功能,并探讨其核心原理和相关配置。 首先...
在Web开发中,文件上传是一项常见的功能,而jQuery Uploadify插件因其简洁的API和强大的功能,成为众多开发者首选的批量上传解决方案。尤其是其支持中文版本,更是方便了中文用户进行操作。本文将深入解析jQuery ...
jQuery Uploadify 是一款基于jQuery的文件上传插件,它提供了用户友好的界面,支持多文件选择、上传进度显示以及批量上传等功能。这个插件适用于那些希望在网页中实现复杂文件上传功能的开发者。Uploadify 通过Flash...
- **初始化Uploadify**:使用jQuery选择器找到目标元素,并调用`uploadify()`方法进行初始化,传入配置参数,如上传URL、文件类型限制、队列大小等。 - **事件监听**:可以通过设置事件处理器来监听文件选择、上传...
uploadIfy是基于JQuery的一个文件上传插件,它支持单个和批量文件上传,具有进度条显示、预览、错误处理等功能。在我们的案例中,uploadIfy提供了用户友好的界面,使得用户可以方便地选择多个文件进行上传,并实时...
批量上传_uploadify_java”提供了一个基于jQuery插件Uploadify和Java后端实现批量上传的示例,非常适合开发者学习和参考。 首先,Uploadify是一款流行的jQuery插件,它允许用户通过拖放或选择文件按钮进行文件上传...
Uploadify是基于jQuery的插件,它利用Flash的FileReference对象实现了文件选择和上传的异步操作,同时支持批量上传,大大提升了用户体验。 **2. Uploadify的安装与配置** 首先,你需要在项目中引入jQuery库和...
在这个场景下,`jQuery Uploadify`插件是一个非常实用的工具,它为ASP.NET开发者提供了一个简单易用的前端文件上传解决方案。本文将详细探讨如何在ASP.NET环境中结合jQuery Uploadify实现文件和图片的批量上传。 ...
在本文中,我们将深入探讨如何在Asp.net环境中利用Jquery.Uploadify插件实现文件的批量上传功能。Asp.net是一种强大的Web应用程序框架,而Jquery.Uploadify是jQuery库的一个扩展,专门用于处理文件上传,它允许用户...
jQuery Uploadify插件为开发者提供了一个强大的解决方案,它允许用户批量上传文件,并且在上传过程中显示进度条,极大地提升了用户体验。本文将深入探讨jQuery Uploadify的工作原理、主要功能以及如何在项目中应用。...