基于jquery的上传插件Uploadify

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

　　

 

　　简介

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

　　支持单文件或多文件上传，可控制并发上传的文件数

　　在服务器端支持各种语言与之配合使用，诸如PHP,.NET,Java……

　　通过参数可配置上传文件类型及大小限制

　　通过参数可配置是否选择文件后自动上传

　　易于扩展，可控制每一步骤的回调函数(onSelect, onCancel……)

　　通过接口参数和CSS控制外观

　　更多……

　　相关链接

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

　　Uploadify在线演示：在线Demo

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

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

　　使用方法

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

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

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

　　<input type="file" name="fileInput" id="fileInput" />

　　//将声明的普通上传控件与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>

 

文章来自中国建站：http://www.jz123.cn/text/2419333.html

http://julianna-only.iteye.com/blog/730006