基于JQuery的上传插件Uploadify

无论是做Web产品还是Web项目，文件上传是经常要用到的功能。以前经常听到做项目的同事抱怨：“这款文件上传控件功能强大但是用起来麻烦，最简单的input上传使用方便但是功能太简单（例如不支持多文件），外观也不尽如人意”。之后我一直留意网上的上传控件，最近看到一款基于jquery的上传插件Uploadify无论在功能、外观、可用性和扩展性上都有不错表现，于是研究了一番，介绍给大家。

宁城ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！

简介

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

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

相关链接

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

Uploadify在线演示：在线Demo

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

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

使用方法

1.下载插件安装包后，可以看到里面的几个主要文件：jquery.uploadify.js（完成上传功能的脚本文件，在调用页面引用）、uploadify.css（外观样式表）、uploader.swf（上传控件的主体文件，flash控件）、upload.php（服务器端处理文件，官方仅提供了php版的）

2.引用了插件文件后，在页面中做如下调用：

  
 
 
 

   
  
  
  
//声明一个普通的html文件上传控件，并指定id
  
 
 
 

  
 
 
 

   
  
  
  
//将声明的普通上传控件与Uploadify插件绑定 
   
  
  
  

   
  
  
  
$(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'         //要上传到的服务器路径，默认‘/’ 
   
  
  
  
'multi'     : true,               //是否允许同时上传多文件，默认false 
   
  
  
  
'fileDesc' : 'rar文件或zip文件'  //出现在上传对话框中的文件类型描述 
   
  
  
  
'fileExt'   : '*.rar;*.zip',      //控制可上传文件的扩展名，启用本项时需同时声明fileDesc 
   
  
  
  
'sizeLimit': 86400           //控制上传文件的大小，单位byte 
   
  
  
  
'simUploadLimit' :5         //多文件上传时，同时上传文件数目限制 
   
  
  
  
}); 
   
  
  
  
}); 
   
  
  
  

   
  
  
  
  
   
  
  
  
上面列出了我认为常用的配置选项，此外还有很多参数可配置，参考官方文档
  
 
 
 

3.通过调用相关功能函数，声明功能按钮。
例如声明上传功能按钮（自动上传时不需要）：

   
 
 
 

    
  
  
  
上传文件
   
 
 
 

声明取消多文件上传时上传队列：

   
 
 
 

    
  
  
  
取消上传队列
   
 
 
 

其它说明

官方只提供了php版本的服务器端处理文件，由于我平时的工作使用.net，下面提供一个我写的.NET C#版的处理文件：
点击下载C#版处理文件

分享文章：基于JQuery的上传插件Uploadify
标题URL：http://www.shufengxianlan.com/qtweb/news23/520973.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联