1、jquery uploadify 下载：http://www.uploadify.com/

2、安装：解压后拷贝的工程目录下面，如：WebRoot/uploaddify

3、配置项说明：

uploader： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。

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

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

　　 filesUploaded :上传的所有文件个数。

　　 errors ：出现错误的个数。

　　 allBytesLoaded ：所有上传文件的总大小。

　　 speed ：平均上传速率 kb/s

　　相关函数介绍

　　在上面的例子中已经用了uploadifyUpload和 uploadifyClearQueue两个函数，除此之外还有几个函数：

　　 uploadifySettings：可以动态修改上面介绍 的那些key值，如下面代码

　　 $('#uploadify').uploadifySettings('folder','JS');

　 　如果上传按钮的事件写成下面这样，文件将会上传到uploadifySettings定义的目录中

    <a　 href="javascript:$('#uploadify').uploadifySettings('folder','JS');
    $('#uploadify').uploadifyUpload()"> 上传</a>

　　 uploadifyCancel：该函数接受一个queueID作为参数，可以取消文件队列中 指定queueID的文件。

　　$('#uploadify').uploadifyCancel(id);

4、使用：

前台

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
  3. <html>
  4. <head>
  5. <title>uploadify-实例</title>
  6. <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
  7. <link href="uploadify/css/default.css" rel="stylesheet" type="text/css" />
  8. <link href="uploadify/css/uploadify.css" rel="stylesheet" type="text/css" />
  9. <script type="text/javascript" src="uploadify/scripts/jquery-1.3.2.min.js"></script>
  10. <script type="text/javascript" src="uploadify/scripts/swfobject.js"></script>
  11. <script type="text/javascript" src="uploadify/scripts/jquery.uploadify.v2.1.0.min.js"></script>
  12. <script type="text/javascript">
  13. $(document).ready(function() {
  14. $("#uploadify").uploadify({
  15. 'uploader'       : 'uploadify/scripts/uploadify.swf',
  16. 'script'         : 'UploadPhotoServlet',
  17. 'cancelImg'      : 'uploadify/cancel.png',
  18. 'buttonImg'      : 'uploadify/buttonImg.png',
  19. 'folder'         : '/jxdBlog/photos',
  20. 'queueID'        : 'fileQueue',
  21. 'auto'           : false,
  22. 'multi'          : true,
  23. 'wmode'          : 'transparent',
  24. ,
  25. 'fileExt'        : '*.png;*.gif;*.jpg;*.bmp;*.jpeg',
  26. 'fileDesc'       : '图片文件(*.png;*.gif;*.jpg;*.bmp;*.jpeg)',
  27. 'onAllComplete'  :function(event,data)
  28. {
  29. $('#result').html(data.filesUploaded +'个图片上传成功');
  30. }
  31. });
  32. });
  33. </script>
  34. <style type="text/css">
  35. .inputcss
  36. {
  37. ;
  38. font-family: "Tahoma";
  39. font-size: 12px;
  40. border:solid 1px #CCCCCC;
  41. }
  42. .buttoncss
  43. {
  44. ;
  45. font-family: "Tahoma";
  46. font-size: 12px;
  47. background-color:#FFFFFF;
  48. border:solid 1px #CCCCCC;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <table style="width: 90%;">
  54. <tr>
  55. <td style="width: 100px;">
  56. <input type="file" name="uploadify" id="uploadify" />
  57. </td>
  58. <td align="left">
  59. <a href="javascript:$('#uploadify').uploadifyUpload()">开始上传</a>|
  60. <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消上传</a>
  61. <span id="result" style="font-size: 13px;color: red"></span>
  62. </td>
  63. </tr>
  64. </table>
  65. <div id="fileQueue" style="width: 400px;height: 300px; border: 2px solid green;"></div>
  66. </body>
  67. </html>

后台：

这里需要用到commons-fileupload组件

所需要的包：

1、commons-fileupload-1.2.1.jar：

下载地址 http://commons.apache.org/downloads/download_fileupload.cgi

2、commons-io-1.4.jar：

下载地址 http://commons.apache.org/downloads/download_io.cgi

  1. /**
  2. * 文件上传实例
  3. * @author samLee
  4. *
  5. */
  6. public class UploadPhotoServlet extends HttpServlet {
  7. private static final long serialVersionUID = 1L;
  8. public UploadPhotoServlet() {
  9. super();
  10. }
  11. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  12. this.doPost(request, response);
  13. }
  14. @SuppressWarnings("unchecked")
  15. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  16. //文件存放的目录
  17. File tempDirPath =new File(request.getSession().getServletContext().getRealPath("/")+"\\upload\\");
  18. if(!tempDirPath.exists()){
  19. tempDirPath.mkdirs();
  20. }
  21. //创建磁盘文件工厂
  22. DiskFileItemFactory fac = new DiskFileItemFactory();
  23. //创建servlet文件上传组件
  24. ServletFileUpload upload = new ServletFileUpload(fac);
  25. //文件列表
  26. List fileList = null;
  27. //解析request从而得到前台传过来的文件
  28. try {
  29. fileList = upload.parseRequest(request);
  30. } catch (FileUploadException ex) {
  31. ex.printStackTrace();
  32. return;
  33. }
  34. //保存后的文件名
  35. String imageName = null;
  36. //便利从前台得到的文件列表
  37. Iterator<FileItem> it = fileList.iterator();
  38. while(it.hasNext()){
  39. FileItem item =  it.next();
  40. //如果不是普通表单域，当做文件域来处理
  41. if(!item.isFormField()){
  42. +item.getName();
  43. BufferedInputStream in = new BufferedInputStream(item.getInputStream());
  44. BufferedOutputStream out = new BufferedOutputStream(
  45. new FileOutputStream(new File(tempDirPath+"\\"+imageName)));
  46. Streams.copy(in, out, true);
  47. }
  48. }
  49. //
  50. PrintWriter out = null;
  51. try {
  52. out = encodehead(request, response);
  53. } catch (IOException e) {
  54. e.printStackTrace();
  55. }
  56. //这个地方不能少，否则前台得不到上传的结果
  57. out.write("1");
  58. out.close();
  59. }
  60. /**
  61. * Ajax辅助方法 获取 PrintWriter
  62. * @return
  63. * @throws IOException
  64. * @throws IOException
  65. * request.setCharacterEncoding("utf-8");
  66. response.setContentType("text/html; charset=utf-8");
  67. */
  68. private PrintWriter encodehead(HttpServletRequest request,HttpServletResponse response) throws IOException{
  69. request.setCharacterEncoding("utf-8");
  70. response.setContentType("text/html; charset=utf-8");
  71. return response.getWriter();
  72. }
  73. }

　　 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：选择文件到文件队列中后的每一个文件上的关闭按钮图标，

jquery uploadify插件多文件上传的更多相关文章

  1. jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能

     Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...

  2. js插件---IUpload文件上传插件（包括图片）

    js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...

  3. WordPress Contact Form 7插件任意文件上传漏洞

    漏洞名称: WordPress Contact Form 7插件任意文件上传漏洞 CNNVD编号: CNNVD-201311-415 发布时间: 2013-11-28 更新时间: 2013-11-28 ...

  4. jquery.form 兼容IE89文件上传

    导入部分 <script type="text/javascript" src="js/jquery-1.8.3.min.js" charset=&quo ...

  5. javascript插件uploadify简单实现文件上传

    最近在学习mvc,需要用到文件上传的功能,找了很多的jquery插件,最后决定使用uploadify这个插件,参照了各位大神的博客,终于勉勉强强会用了.在此,做一下笔记,方便以后忘了查看. 首先在官网 ...

  6. Uploadify & jQuery.imgAreaSelect 插件实现图片上传裁剪

    在网站中需要一个图片上传裁剪的功能,借鉴这篇文章 Ajax+PHP+jQuery图片截图上传 的指点,找到了jquery.imgAreaSelect这个不错插件,能对图片进行自定义区域选择并给出坐标, ...

  7. 使用Uploadify(UploadiFive)多文件上传控件遇到的坑

    最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...

  8. 在php中使用jquery uploadify进行多图片上传

    jquery uploadify是一款Ajax风格的批量图片上传插件,在PHP中使用jquery uploadify很方便,请按照本文介绍的方法和步骤,为你的PHP程序增加jquery uploadi ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（56）-插件---单文件上传与easyui使用fancybox

    系列目录 https://yunpan.cn/cZVeSJ33XSHKZ  访问密码 0fc2 今天整合lightbox插件Fancybox1.3.4,发现1.3.4版本太老了.而目前easyui 1 ...

随机推荐

  1. 阿里云服务器上架设apache php mysql 环境

    由于朋友一公司要做企业站,于是就买了阿里云的服务器.买完进去发现iptables 和selinux默认就是关掉的,可能是因为阿里云有云盾就可以不用自带的防火墙吧,具体配置过程如下(我边配边记录的): ...

  2. C++ 的多重继承

    不能够从对象访问基类的公开方法,真悲剧!只能在类里面提供公共函数! void Mentor::GetInfo(){ cout<<endl<<name<<endl&l ...

  3. JavaWeb学习笔记--filter开发

    介绍自定义的Filter类必须实现Filter接口,并且实现Filter接口定义的init() doFilter() destory()方法.其中init为初始化,destory为销毁 doFilte ...

  4. SharedPreference简介

    SharedPreference 是一种简单的.轻量级的名称/值对(NVP)机制,用于保存原始应用程序数据. 使用SharedPreferences类可以创建名称/值对的命名映射,他们可以在会话之间持 ...

  5. 自制单片机之二-----AT89S51ISP下载线的制做

    最小系统板做好了,接下来就是做根ISP下载线了.否则程序怎么写到AT89S51芯片里呢? 先来认识一下AT89S51上ISP(在线编程)功能脚的定义 看上图的左边AT89S51引脚图的P1.5.P1. ...

  6. Linq to BBJECT之非延时标准查询操作符

    非延时标准查询操作符是指不具备延时查询特性的标准查询操作符,这些操作符一般用于辅助延时标准查询操作符使用. 1.ToArray操作符 ToArray操作符用于将一个输入序列转换成一个数组. 方法原型: ...

  7. C# 进程间通信(共享内存)

    原文:C# 进程间通信(共享内存) 进程间通信的方式有很多,常用的方式有: 1.共享内存(内存映射文件,共享内存DLL). 2.命名管道和匿名管道. 3.发送消息 本文是记录共享内存的方式进行进程间通 ...

  8. 教程：30分钟学会Adobe Premiere

    原文地址:http://tieba.baidu.com/p/2785313831 视频教程地址

  9. Java集合的实现细节—Set集合和Map集合

    Set:代表无序.不可重复的集合 Map:代表key-value对集合,也称为关联数组 从表面上看,Set和Map相似性很少,但实际上可以说Map集合时Set集合的扩展. 1.Set集合和Map集合的 ...

  10. WPF 控件之ComboBox绑定[2]

    最近感觉新的方法Binding comboBox用起来很好用. 记录一下: <ComboBox Grid.Row=" x:Name="cboFamilyName" ...