易用的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>
```

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

   JQuery文件上传插件jquery.uploadify-v2.1.0的详细使用方法JavaScript   2009-08-31 01:39   阅读472   评论0   字号： 大大  中中  小小 今天试了试JQuery的文件上传插件,感觉非常的好用,可以自定义任意的任意的链接标签或者其他表单元素,AJAX功能的上传控件很适合做前端,这个控件目前也比较成熟,可以用在项目中查看AjaxFileUpload相关jQuery官方文档介绍下载AjaxFileUpload JS库文件查看AjaxFileUpload演示一,创建一个AJAX按钮元素,可以是任意的标签比如<div>,将ID写为"fileUpload"<div id="fileUpload">上传</div>在HTML中加入以下JavaScript代码: $(document).ready(function() { $("#fileUpload").fileUpload({  'uploader': 'uploadify/uploader.swf',  'cancelImg': 'uploadify/cancel.png',  'script': 'uploadify/upload.php',//要提交到的处理文件上传的PHP文件  'folder': '../files',//要上传到哪个目录下,可以使用http://www.cnblogs.com/images这样的路径  'multi': false,  'displayData': 'speed',  onComplete: function (evt, queueID, fileObj, response, data) {//onComplete表示文件上传成功事件调用函数   alert(""+response);//调用传递回来的响应信息  } });接下来就是PHP文件的代码.里面只有几行  <?phpif (!empty($_FILES)) { $tempFile = $_FILES['Filedata']['tmp_name']; $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_GET['folder'] . '/'; $targetFile =  str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];  if(move_uploaded_file($tempFile,$targetFile)){  echo "".$_FILES['Filedata']['name'];//此行表示要返回所上传的文件名; }else{  echo "2"; } }else{ echo '1';}?>调用方法很简单,下面是HTML页面代码<div id="fileUpload">You have a problem with your javascript</div>  <a href="javascript:$('#fileUpload').fileUploadStart()">Start Upload</a> |  <a href="javascript:$('#fileUpload').fileUploadClearQueue()">Clear Queue</a>

来源：https://www.cnblogs.com/guiliangfeng/archive/2009/11/09/1598828.html

标签

uploadify

jquery

javascript

文件上传

fileinput