关于jquery文件上传插件 uploadify 3.1的使用

要使用uplaodify3.1,自然要下载相应的包,下载地址http://www.uploadify.com/download/,这里有两种包,一个是基于flash,免费的,一个是基于html5,需要付费,我这里所说的也是前一种。当然现在可能已经不再是3.1版本了,估计是3.2了。不过,差别不会太大!

首先在页面中引入一下文件:

   <link rel="stylesheet" type="text/css" href="css/uploadify.css">
   <script type="text/javascript" src="js/jquery-1.4.4.js"></script>
   <script type="text/javascript" src="js/jquery.uploadify-3.1.js"></script>
   <script type="text/javascript" src="js/jquery.uploadify-3.1.min.js"></script>

uploadify.swf要和css放在一起,不然会找不到。

jsp页面里:

<input type="file" name="uploadify" id="uploadify" value="浏览"/>
<div id="fileQueue" style="border-top: thin solid gray;"></div>

一下是我自己的页面的代码:

<script type="text/javascript">
     $(‘#rightFrame‘).load(function(){
       var account = $("#account").val();
       var id= $("#userId").val();
       var currentNode=0;
       $("#uploadify").uploadify({
      //注:这里uploadify为html标签,文件输入框id
                    swf: ‘css/uploadify.swf‘,
                    uploader: ‘uploadfile.action;‘,
                    cancelImg: ‘/images/uploadify-cancel.png‘,
                    buttonText:‘选择文件‘,
                    fileObjName :‘uploadify‘,
                    auto: true,
                    multi:true,
                    Debug:true,
                    queueID:‘fileQueue‘,//这里fileQueue 为上传进度条显示在哪个div里
                    formData:{‘account‘:account,‘id‘:id,‘currentNode‘:$("#rightFrame").contents().find("#test").val()},
                    removeCompleted:true,
                    queueSizeLimit:999,
                    fileSizeLimit:‘100MB‘,
                    height:28,
                    width:90,
                    successTimeout:28,
                    requeueErrors:true,
                    uploadLimit:5,
                    onUploadSuccess: function (file, data, response) {
                     if(response)
                     {
                      currentNode=data;
                        }
              },
              onQueueComplete : function(stats){
                  window.parent.rightFrame.location.href="fileaction?filenode="+currentNode;
               alert("上传完毕");
                 }

             });
         });

     </script>

属性解释:


auto


Boolean


True


添加到队列后是否自动上传


buttonClass


String


Empty String


为Uploadify按钮添加一个类名


buttonCursor


String


“hand”


鼠标移上浏览按钮显示的鼠标样式

两个值:arrow(箭头)、hand(手形)


buttonImage


String


Null


“浏览”按钮的背景图像的路径。

如果使用默认的样式,你可以设置按钮悬停状态(这个选项是一个方便的选项和按钮分配图像的最佳方式是在CSS文件中。)


buttonText


String


“SELECT FILES”


显示在浏览按钮上的文本。注:若没有修改uploadify.swf的字体和uploadify.js文件的编码方式,使用中文将会是乱码


checkExisting


String


Debug


Boolean


False


设置为True打开SWFUpload调试模式。


fileObjName


String


“Filedata”


在服务器端接收文件的Form表单键名


fileSizeLimit


Number


0


允许上传文件的最大大小。这个值可以是一个数字或字符串。如果它是一个字符串,它接受一个单位(B, KB, MB, or GB)。默认单位为KB。您可以将此值设置为0 ,没有限制。


fileTypeDesc


String


“All Files”


可选的文件的说明。此字符串将出现在浏览文件对话框的文件类型下拉框中。


fileTypeExts


String


“*.*”


允许上传的文件扩展名。可以以英文分号隔开的多种文件扩展名。即”*.jpg;*.gif;”

注:如果用户手动键入文件名,将会绕过此安全级别,所以你需要在后台再次对文件名类型进行验证。


formData


JSON Object


Empty Object


一个额外的JSON对象数据,将与每个文件一起发送至服务器端。如果为动态值,请在onUploadStart()中使用settings()方法更改该JSON值


Height


Number


30


浏览按钮所显示的高度


method


String


“post”


上传文件的方式。

两个值:”get”、”post”


multi


Boolean


True


设置是否为多文件上传,如果设置为False,一次将只能上传一个文件


overrideEvents


JSON Array


Empty Array


你想绕过的默认脚本的事件名称的数组。你可以告诉在文档页中的每个事件可以被重写的事件。


preventCaching


Boolean


True


一个防止Flash缓存和冲突的方式,如果设置为True,则Flash的URL将会添加一个随机数。


progressData


String


“percentage”


设置要在文件上传进度更新队列项目中显示数据的类型。

两个值”percentage”(显示百分比)、” speed”(显示速度)


queueID


String


False


上传文件队列所放的元素ID,必须为ID,且不像jQuery选择器那样,它不需要加#号。如果为false,则队列会自动添加到浏览按钮下方。


queueSizeLimit


Number


999


一次可以在队列中文件的最大数目。这并不限制可以上载的文件的数目。若要限制可以上载的文件的数目,请使用 uploadLimit。如果选定要添加到队列的文件的数目超过此限制,则会触发 onSelectError 事件。


removeCompleted


Boolean


True


当文件上传完成后,是否将此文件从上传队列中清除(默认清除)。


removeTimeout


Number


3


从文件上传完成到清除此文件之间的延迟。单位:秒


requeueErrors


Boolean


False


如果设置为true,期间上传回传失误,重新排队,并多次试图上传的文件。


successTimeout


Number


30


上传成功后,将等待服务器的响应时间。在此时间后,若服务器未响应,则默认为成功(因为已经上传完成,只是等待服务器的响应)。单位:秒


swf


String


“uploadify.swf”


uploadify中的uploadify.swf的路径,可以是相对或绝对路径。相对路径为相对于当前页面路径。


uploader


String


“uploadify.php”


服务器上传脚本,即接收上传文件后台处理文件路径,可以是相对或绝对路径。相对路径为相对于当前页面路径。


uploadLimit


Number


999


允许您上传的文件的最大数量。当达到或超过这个数字, onUploadError事件被触发。


width


Number


120


浏览按钮的宽度。

需要注意的是:fileObjName属性 它必须和你服务器里文件接收名一致,不然接收不到路径!

时间: 2024-10-09 01:22:14

关于jquery文件上传插件 uploadify 3.1的使用的相关文章

支持多文件上传的jQuery文件上传插件Uploadify

支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数定制功能,如文件大小.文件类型.按钮图片定义.上传文件脚本等. Flash版本使用方法: 1.加载JS和CSS ? 1 2 3 <script src="jquery/1.7.1/jquery.min.js

强大的支持多文件上传的jQuery文件上传插件Uploadify

支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数定制功能,如文件大小.文件类型.按钮图片定义.上传文件脚本等. Flash版本使用方法: 1.加载JS和CSS ? 1 2 3 <script src="jquery/1.7.1/jquery.min.js

关于jquery文件上传插件&#160;uploadify&#160;3.1的使用

要使用uplaodify3.1,自然要下载相应的包,下载地址http://www.uploadify.com/download/,这里有两种包,一个是基于flash,免费的,一个是基于html5,需要付费,我这里所说的也是前一种.当然现在可能已经不再是3.1版本了,估计是3.2了.不过,差别不会太大!    首先在页面中引入一下文件:    <link rel="stylesheet" type="text/css" href="css/upload

文件上传插件Uploadify在Struts2中的应用,完整详细实例

->最近由于项目需要使用到一个上传插件,在网上发现uploadify挺不错,所以决定使用它,但是官网文档和例子是php的,而项目是SSI框架的,所以自己对uploadify在struts2中的使用进行了一番研究,最终实现了.发现网上关于这方面的资料很少,而且有的一两篇例子还不大全,网友提问质疑很多,所以,下面我特将我的代码公布: --------------------------------------------------------------------- 步骤一: 到官网上下载upl

jQuery文件上传插件jQuery Upload File 有上传进度条

jQuery文件上传插件jQuery Upload File 有上传进度条 2015年05月15日 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度条显示.标准HTML form文件上传,也就是说,只要服务端支持接收multipart/form-data格式数据就能使用此上传插件. 本站web端文件文件提交即使用此插件,效果如下: 浏览器支持 浏览器支持:IE 8.0,IE 9.0,IE 10.0,Firefox,Saf

可拖拽和带预览图的jQuery文件上传插件ssi-uploader

插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非常方便. 简要教程 ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非常方便. 安装 可以通过bower或npm来安装ssi-uploader文件上传插件. b

文件上传插件uploadify详解

官网:http://www.uploadify.com/ 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个版本,一个用flash,一个是html5.html5的需要付费~所以这里只说flash版本的用法.

JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用

0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比较多,我把我自己使用的ajaxFileUpload文件上传到博客园上了,想要使用的朋友可以下载:http://files.cnblogs.com/files/fonour/ajaxfileupload.js. 整个插件源码不到200行,实现非常简单,大致原理就是通过js动态创建隐藏的表单,然后进行提

文件异步上传,多文件上传插件uploadify

本文中使用java作为例子 uploadify下载 http://files.cnblogs.com/chyg/uploadify.zip jsp页面中需要引入: <script type="text/javascript" src="jquery.uploadify.js"></script> 主要js代码: $("#sysLogo").uploadify({ 'uploader': '${ctx}/web/module