看到一款基于jquery的上传插件Uploadify无论在功能、外观、可用性和扩展性上都有不错表现，于是研究了一番，介绍给大家。

 


简介

Uploadify简单说来，是基于Jquery的一款文件上传插件。它的功能特总结如下：

支持单文件或多文件上传，可控制并发上传的文件数
在服务器端支持各种语言与之配合使用，诸如PHP,.NET,Java……
通过参数可配置上传文件类型及大小限制
通过参数可配置是否选择文件后自动上传
易于扩展，可控制每一步骤的回调函数（onSelect, onCancel……）
通过接口参数和CSS控制外观
更多……



相关链接

Uploadify主页地址：www.uploadify/ 在该页面你可以了解到关于他的更多内容。

Uploadify在线演示：在线Demo

Uploadify配置参数及接口文档：www.uploadify/documentation

Uploadify插件下载地址：www.uploadify/download



使用方法

下载插件安装包后，可以看到里面的几个主要文件：jquery.uploadify.js（完成上传功能的脚本文件，在调用页面引用）、uploadify.css（外观样式表）、uploader.swf（上传控件的主体文件，flash控件）、upload.php（服务器端处理文件，官方仅提供了php版的）
引用了插件文件后，在页面中做如下调用：
//声明一个普通的html文件上传控件，并指定id
<input type="file" name="fileInput" id="fileInput" />

continue语句用于终止循环体的本次执行//将声明的普通上传控件与Uploadify插件绑定
<script type="text/javascript">
$(document).ready(function() {
$('#fileInput').fileUpload ({
//以下参数均是可选
'uploader'  : 'uploader.swf',  //指定上传控件的主体文件，默认‘uploader.swf’
'script'    : 'upload.php',      //指定服务器端上传处理文件，默认‘upload.php’
'cancelImg' : 'cancel.png',  //指定取消上传的图片，默认‘cancel.png’
'auto'      : true,              //选定文件后是否自动上传，默认false
'folder'    : '/uploads'        //要上传到的服务器路径，默认‘/’
'muti'    : true,              //是否允许同时上传多文件，默认false
'fileDesc' : 'rar文件或zip文件'  //出现在上传对话框中的文件类型描述
'fileExt'  : '*.rar;*.zip',      //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
'sizeLimit': 86400          //控制上传文件的大小，单位byte
'simUploadLimit' :5        //多文件上传时，同时上传文件数目限制
});
});
</script>

上面列出了我认为常用的配置选项，此外还有很多参数可配置，参考官方文档
通过调用相关功能函数，声明功能按钮。
例如声明上传功能按钮（自动上传时不需要）：


<a href="javascript:$('#fileInput').fileUploadStart();">上传文件</a>
声明取消多文件上传时上传队列：

<a href="javascript:$('#fileInput').fileUploadClearQueue();">取消上传队列</a>
 jquery.Uploadify部分参数的介绍，API的中文解释以以使用例子
    以下附上Uploadify部分参数的介绍： 

　uploader ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后弹出打开文件对话框，默认值：uploadify.swf。
  script ： 后台处理程序的相对路径 。默认值：uploadify.php
  checkScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
  fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
  method ： 提交方式Post 或Get 默认为Post
  scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为springer数据库为什么进不去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 ： 设置浏览按钮的高度怎样用c语言给单片机写程序 ，默认值：30。
  wmode ： 设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。
  cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标

Uploadify还自带了很多参数及有用的方法和回调函数，都在API里，虽然是全英文的，但很容易看懂，这里就不说了。
以下是我用到的代码，可以参考一下：


使用例子:
Copy code
1、
<script type="text/javascript"> 
$(document).ready(function() { 
$("#uploadify").uploadify({ 
'uploader'      : 'images/uploadify.swf', 
'script'        : '<%=ContextPath()%>/content/ImportScheduleCommitAction.do', 
'cancelImg'      : 'images/cancel.png', 
'folder'        : '/', 
'queueID'        : 'fileQueue', 
'fileDataName'  : 'uploadify', 
'fileDesc'      : '支持格式:xls.',   
'fileExt'        : '*.xls', 
'auto'          : false, 
'multi'          : true, 
'height'        : 20, 
'width'          : 50, 
'simUploadLimit' : 3, 
//'buttonText'    : '', 
'buttonImg'      : 'images/browse.jpg', 
// 'hideButton'    : true, 
// 'rollover'      : true,  sql语句查询成绩小于60分
'wmode'          : 'transparent' , 
onComplete      : function (event, queueID, fileObj, response, data) 
{   
$('<li></li>').appendTo('.files').text(response);   
},   
onError          : function(event, queueID, fileObj) 
{   
alert("文件:" + fileObj.name + " 上传失败");   
}   
// onCancel        : function(event, queueID, fileObj) 
// {   
//    alert("取消文件：" + fileObj.name);   
// }   
});



2、
Copy code
<script type="text/javascript">
$(document).ready(function() {
jquery下载文件插件$("#uploadify").uploadify({
'uploader'      : 'images/uploadify.swf',
'script'        : '<%=ContextPath()%>/content/ImportScheduleCommitAction.do',
'cancelImg'      : 'images/cancel.png',
'folder'        : '/',
'queueID'        : 'fileQueue',
'fileDataName'  : 'uploadify',
'fileDesc'      : '支持格式:xls.',
'fileExt'        : '*.xls',
'auto'          : false,
'multi'          : true,
'height'        : 20,
'width'          : 50,
'simUploadLimit' : 3,
//'buttonText'    : '',
'buttonImg'      : 'images/browse.jpg',
// 'hideButton'    : true,
// 'rollover'      : true,
'wmode'          : 'transparent' ,
onComplete      : function (event, queueID, fileObj, response, data)
{
$('<li></li>').appendTo('.files').text(response);
},
onError          : function(event, queueID, fileObj)
{
alert("文件:" + fileObj.name + " 上传失败");
}
// onCancel        : function(event, queueID, fileObj)
// {
//    alert("取消文件：" + fileObj.name);
// }
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。