jquery uploadify插件多文件上传
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、使用:
前台
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
- <html>
- <head>
- <title>uploadify-实例</title>
- <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
- <link href="uploadify/css/default.css" rel="stylesheet" type="text/css" />
- <link href="uploadify/css/uploadify.css" rel="stylesheet" type="text/css" />
- <script type="text/javascript" src="uploadify/scripts/jquery-1.3.2.min.js"></script>
- <script type="text/javascript" src="uploadify/scripts/swfobject.js"></script>
- <script type="text/javascript" src="uploadify/scripts/jquery.uploadify.v2.1.0.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $("#uploadify").uploadify({
- 'uploader' : 'uploadify/scripts/uploadify.swf',
- 'script' : 'UploadPhotoServlet',
- 'cancelImg' : 'uploadify/cancel.png',
- 'buttonImg' : 'uploadify/buttonImg.png',
- 'folder' : '/jxdBlog/photos',
- 'queueID' : 'fileQueue',
- 'auto' : false,
- 'multi' : true,
- 'wmode' : 'transparent',
- ,
- 'fileExt' : '*.png;*.gif;*.jpg;*.bmp;*.jpeg',
- 'fileDesc' : '图片文件(*.png;*.gif;*.jpg;*.bmp;*.jpeg)',
- 'onAllComplete' :function(event,data)
- {
- $('#result').html(data.filesUploaded +'个图片上传成功');
- }
- });
- });
- </script>
- <style type="text/css">
- .inputcss
- {
- ;
- font-family: "Tahoma";
- font-size: 12px;
- border:solid 1px #CCCCCC;
- }
- .buttoncss
- {
- ;
- font-family: "Tahoma";
- font-size: 12px;
- background-color:#FFFFFF;
- border:solid 1px #CCCCCC;
- }
- </style>
- </head>
- <body>
- <table style="width: 90%;">
- <tr>
- <td style="width: 100px;">
- <input type="file" name="uploadify" id="uploadify" />
- </td>
- <td align="left">
- <a href="javascript:$('#uploadify').uploadifyUpload()">开始上传</a>|
- <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消上传</a>
- <span id="result" style="font-size: 13px;color: red"></span>
- </td>
- </tr>
- </table>
- <div id="fileQueue" style="width: 400px;height: 300px; border: 2px solid green;"></div>
- </body>
- </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
- /**
- * 文件上传实例
- * @author samLee
- *
- */
- public class UploadPhotoServlet extends HttpServlet {
- private static final long serialVersionUID = 1L;
- public UploadPhotoServlet() {
- super();
- }
- protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
- this.doPost(request, response);
- }
- @SuppressWarnings("unchecked")
- protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
- //文件存放的目录
- File tempDirPath =new File(request.getSession().getServletContext().getRealPath("/")+"\\upload\\");
- if(!tempDirPath.exists()){
- tempDirPath.mkdirs();
- }
- //创建磁盘文件工厂
- DiskFileItemFactory fac = new DiskFileItemFactory();
- //创建servlet文件上传组件
- ServletFileUpload upload = new ServletFileUpload(fac);
- //文件列表
- List fileList = null;
- //解析request从而得到前台传过来的文件
- try {
- fileList = upload.parseRequest(request);
- } catch (FileUploadException ex) {
- ex.printStackTrace();
- return;
- }
- //保存后的文件名
- String imageName = null;
- //便利从前台得到的文件列表
- Iterator<FileItem> it = fileList.iterator();
- while(it.hasNext()){
- FileItem item = it.next();
- //如果不是普通表单域,当做文件域来处理
- if(!item.isFormField()){
- +item.getName();
- BufferedInputStream in = new BufferedInputStream(item.getInputStream());
- BufferedOutputStream out = new BufferedOutputStream(
- new FileOutputStream(new File(tempDirPath+"\\"+imageName)));
- Streams.copy(in, out, true);
- }
- }
- //
- PrintWriter out = null;
- try {
- out = encodehead(request, response);
- } catch (IOException e) {
- e.printStackTrace();
- }
- //这个地方不能少,否则前台得不到上传的结果
- out.write("1");
- out.close();
- }
- /**
- * Ajax辅助方法 获取 PrintWriter
- * @return
- * @throws IOException
- * @throws IOException
- * request.setCharacterEncoding("utf-8");
- response.setContentType("text/html; charset=utf-8");
- */
- private PrintWriter encodehead(HttpServletRequest request,HttpServletResponse response) throws IOException{
- request.setCharacterEncoding("utf-8");
- response.setContentType("text/html; charset=utf-8");
- return response.getWriter();
- }
- }
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插件多文件上传的更多相关文章
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...
- js插件---IUpload文件上传插件(包括图片)
js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
- WordPress Contact Form 7插件任意文件上传漏洞
漏洞名称: WordPress Contact Form 7插件任意文件上传漏洞 CNNVD编号: CNNVD-201311-415 发布时间: 2013-11-28 更新时间: 2013-11-28 ...
- jquery.form 兼容IE89文件上传
导入部分 <script type="text/javascript" src="js/jquery-1.8.3.min.js" charset=&quo ...
- javascript插件uploadify简单实现文件上传
最近在学习mvc,需要用到文件上传的功能,找了很多的jquery插件,最后决定使用uploadify这个插件,参照了各位大神的博客,终于勉勉强强会用了.在此,做一下笔记,方便以后忘了查看. 首先在官网 ...
- Uploadify & jQuery.imgAreaSelect 插件实现图片上传裁剪
在网站中需要一个图片上传裁剪的功能,借鉴这篇文章 Ajax+PHP+jQuery图片截图上传 的指点,找到了jquery.imgAreaSelect这个不错插件,能对图片进行自定义区域选择并给出坐标, ...
- 使用Uploadify(UploadiFive)多文件上传控件遇到的坑
最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...
- 在php中使用jquery uploadify进行多图片上传
jquery uploadify是一款Ajax风格的批量图片上传插件,在PHP中使用jquery uploadify很方便,请按照本文介绍的方法和步骤,为你的PHP程序增加jquery uploadi ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(56)-插件---单文件上传与easyui使用fancybox
系列目录 https://yunpan.cn/cZVeSJ33XSHKZ 访问密码 0fc2 今天整合lightbox插件Fancybox1.3.4,发现1.3.4版本太老了.而目前easyui 1 ...
随机推荐
- NAMESPACE
限定作用域,比类高,比文件低. cpp 和 h 里面都要用到.
- uC/OS-II中的时间 (转)
时间是一个非常重要的概念,我们和朋友出去游玩需要约定一个时间,做事情也需要花费一段时间,总之,我们的生活离不开时间.操作系统也一样,也需要一个时间来规范其任务的执行. 我们生活中,时间的最小单位是秒, ...
- Java添加自定义注解
今天在整合MyBatis过程中,我使用扫描的方式去扫描DAO目录下的Java文件,但是在Service层使用Autowired的时候报错,但是工程能正常运行,此处有Bug! 解决方案: 1.创建 an ...
- 修改textField的placeholder的字体颜色、大小
textField.placeholder = @"username is in here!"; [textField setValue:[UIColor redColor] fo ...
- pcduino连接OTG登录远程桌面
由于没有HDMI的显示屏,为了方便起见,使用了pcduino的OTG来连接到虚拟桌面,可是发现连接上虚拟桌面后,电脑的外网就断了.下面这个方法让你既可以连接到pcduino,又可以让电脑能上外网. 打 ...
- Codeforces 527D Clique Problem
http://codeforces.com/problemset/problem/527/D 题意:给出一些点的xi和wi,当|xi−xj|≥wi+wj的时候,两点间存在一条边,找出一个最大的集合,集 ...
- GDB 的MI接口
背景介绍: libgdb过时了,目前的GDB调试前端都不用libgdb 目前有两种比较流行:- MI接口,现在应该是MI II接口,是Eclipse CDT所采用的方式- emac输出接口,这个似乎有 ...
- smarty 内置函数if 等判断
{if},{elseif},{else} Smarty的{if}条件判断和PHP的if 非常相似,只是增加了一些特性. 每个{if}必须有一个配对的{/if}. 也可以使用{else} 和 {else ...
- 转:String.Empty、string=”” 和null的区别
原文地址:http://www.cnblogs.com/fanyong/archive/2012/11/01/2750163.html String.Empty是string类的一个静态常量: Str ...
- 【转】linux下tty,控制台,虚拟终端,串口,console(控制台终端)详解----不错
原文网址:http://blog.csdn.net/liaoxinmeng/article/details/5004743 首先: 1.终端和控制台都不是个人电脑的概念,而是多人共用的小型中型大型计算 ...