要使用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=;
$("#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:,
fileSizeLimit:'100MB',
height:,
width:,
successTimeout:,
requeueErrors:true,
uploadLimit:,
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属性 它必须和你服务器里文件接收名一致,不然接收不到路径!

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

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

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  2. jQuery文件上传插件Uploadify(转)

    一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...

  3. JQuery文件上传插件uploadify在MVC中Session丢失的解决方案

    <script type="text/javascript"> var auth = "@(Request.Cookies[FormsAuthenticati ...

  4. jQuery文件上传插件uploadify

    官方网站:http://www.uploadify.com/ 参考博客:jQuery Uploadify在ASP.NET MVC3中的使用 参考博客:使用uploadify上传图片时返回“Cannot ...

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

    要使用uplaodify3.1,自然要下载相应的包,下载地址http://www.uploadify.com/download/,这里有两种包,一个是基于flash,免费的,一个是基于html5,需要 ...

  6. jQuery 文件上传插件:uploadify、swfupload

    jQuery 文件上传插件: uploadify.swfupload

  7. 20款最好的jQuery文件上传插件

    当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...

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

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  9. JQuery文件上传插件JQuery.upload.js的用法简介

    JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...

随机推荐

  1. DHTML【11】--DOM

    大家好,从今天开始,我们将进入DOM的学习. DOM?DOM是何东东呢?大家还记得我在前面提过的DOM树吗?就是我在前面讲HTML的时候画的那个图,那个其实就是一个简单的DOM树,浏览器在解析HTML ...

  2. 前端上传组件 - Plupload

    http://www.cnblogs.com/KTblog/p/4740852.html 效果: 起始界面. ------------- 可以上上传单个文件. ------------- 可以上传多个 ...

  3. 【转】linux下 postgres的一些操作总结

    参考博文: PostgreSQL详解     1. 基本操作命令 安装完成后,PostgreSQL默认创建了名为postgres数据库用户账户,其与MySQL的root以及SQL Server的sa账 ...

  4. CentOS6.5 服务器+apache5.3绑定多个域名+SELinux设置

    下面简单的介绍了如何通过设置Apache的http.conf文件,进行多个域名以及其相关的二级域名的绑定(假设我们要绑定的域名是minidx.com和ntt.cc,二级域名是blog.minidx.c ...

  5. 【译】在Asp.Net中操作PDF - iTextSharp - 使用字体

    原文 [译]在Asp.Net中操作PDF - iTextSharp - 使用字体 紧接着前面我对iTextSharp简介博文,iTextSharp是一个免费的允许Asp.Net对PDF进行操作的第三方 ...

  6. 虚拟化:搭建本地虚拟化环境和安装ubuntu操作系统

    本文介绍如何在本地(windows操作系统)安装虚拟机,并在虚拟机下安装ubuntu操作系统. 一.机器升级 因为是在我的笔记本电脑上操作.首先升级了我的笔记本,买了内存条,将我机器的内存增加到8G, ...

  7. ZXing工具类v1.0

    package com.jadyer.util; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import jav ...

  8. Java的位运算符具体解释实例——与(&amp;)、非(~)、或(|)、异或(^)

    位运算符主要针对二进制,它包含了:“与”.“非”.“或”.“异或”.从表面上看似乎有点像逻辑运算符,但逻辑运算符是针对两个关系运算符来进行逻辑运算,而位运算符主要针对两个二进制数的位进行逻辑运算.以下 ...

  9. PHP - 图像处理

    第14章 处理图像 学习要点: 1.创建图像 2.简单小案例 在PHP5中,动态图象的处理要比以前容易得多.PHP5在php.ini文件中包含了GD扩展包,只需去掉GD扩展包的相应注释就可以正常使用了 ...

  10. CSS属性总结——思路很清晰

    CSS 属性总结 CSS的属性是用来改变文档元素的状态的,其中主要改变两方面的东西,即位置.样式,现在我们就将CSS的属性分为定位和样式两方面来总结,知识结构图如下:     用来定位的属性: 在同一 ...