易用的JQuery上传插件Uploadify

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

易用的JQuery上传插件Uploadify - 往 - 郁郁的博客
简介
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<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> 上面列出了我认为常用的配置选项,此外还有很多参数可配置,参考官方文档
  3. 通过调用相关功能函数,声明功能按钮。
    例如声明上传功能按钮(自动上传时不需要): 
    <a href="javascript:$('#fileInput').fileUploadStart();">上传文件</a>
    声明取消多文件上传时上传队列:
    <a href="javascript:$('#fileInput').fileUploadClearQueue();">取消上传队列</a>
易用的JQuery上传插件Uploadify - 往 - 郁郁的博客
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值