1、简介
Uploadify是jQuery的一个上传插件,支持多文件上传,实现的效果非常不错,带进度显示,提供非常丰富的回调功能函数来对文件上传过程进行处理,兼容性依赖于jQuery,3.2版本兼容各大主流浏览器,如IE、FF、Chrome等。
官方地址:
http://www.uploadify.com/
http://www.uploadify.com/demos/
2、要求
使用jQuery Uploadify需要如下最低要求:
- jQuery1.4.x版本以及以上。
- FlashPlayer 9.0.24版本以及以上。
- 可解析PHP、ASP.Net一门服务器端语言。
3、实现
- 从官方下载Uploadify.zip包,它是免费的。
- 解压缩zip包到一个指定的文件夹。
- 解压缩后的文件夹中包含如下文件:
jquery.uploadify-3.x.min.js
uploadify.php
uploadify.swf
uploadify.css
uploadify-cancel.png
...
- 在项目的网页中引入jQuerylib包
<script type="text/javascript" src="js/jquery-easyui-1.3.2/jquery-1.8.0.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="cms/resources/uploadify/jquery.uploadify.min.js"></script>
<pre name="code" class="html"><link rel="stylesheet" type="text/css" href="uploadify.css" />
- 在页面上添加一个file类型的input元素,如下:
<input type="file" name="file_upload" id="file_upload" />
- 初始化uploadify在上述id=file_upload的元素中:
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php'
// Put your options here
});
});
- 最后完整的页面如下:
<!DOCTYPE html>
<html>
<head>
<title>My Uploadify Implementation</title>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php'
// Your options here
});
});
</script>
</head>
<body>
<input type="file" name="file_upload" id="file_upload" />
</body>
</html>
- 运行结果
4、属性详解
属性 | 默认值 | 说明 |
auto | true | 设置为true,当选择文件后就可以直接上传,为false需要点击上传按钮才上传。 |
buttonClass | empty String | 按钮样式,默认为空字符串。 |
buttonCursor | ‘hand’ | 鼠标指针悬停在按钮上的样式。 |
buttonImage | null; | 浏览按钮的图片路径。 |
buttonText | ‘SELECT FILES’ | 浏览按钮的文本。3 |
checkExisting | false | 文件上传重复性检查程序,检查即将上传的文件在服务器端是否已经存在,存在返回1,不存在返回0。 |
debug | false | 如果设置为true,则表示启用SWFUpload的调试模式。 |
fileObjName | '‘Filedata’ | 文件上传对象的名称,如果命名为the_files,PHP程序可以用$_FILES['the_files']来处理上传的文件对象。 |
fileSizeLimit | 0 | 上传文件的大小限制,如果为整数型,则表示以KB为单位的大小,如果是字符串,则可以使用(B、KB、MB、GB)为单位,比如2MB,如果设置为0则表示无限制。 |
fileTypeDesc | All Files | 这个属性值必须设置fileTypeExts属性后才有效,用来设置选择文件对话框中的提示文本,如果设置fileTypeDesc为:请选择rar doc pdf文件等。 |
fileTypeExts | *.* | 设置可以选择的文件的类型,格式如:*.doc;*.pdf;*.rar。 |
formData | JSON格式上传每个文件的同时提交到服务器的额外数据,可在onUploadStart事件中使用settings方法动态设置。 | |
height | 30 | 设置浏览按钮的高度,默认值。 |
itemTemplate | false | 用于设置上传队列的HTML模板,可以使用以下标签:instanceID-Uploadify实例的ID,fileID队列中此文件的ID,或者理解为此任务的ID,fileName文件的名称,fileSize当前上传的文件大小 |
method | Post | 提交方式Post或Get。 |
multi | true | 设置为true时可以上传多个文件。 |
overrideEvents | 设置哪些事件可以被重写,JSON格式,如:overrideEvents:['onUploadProgress'] | |
preventCaching | true | 如果为true,则每次上传文件时自动加上一串随机字符串参数,防止URL缓存影响上传结果。 |
progressData | 'percentage' | 设置上传进度显示方式,percentage显示上传百分比,speed显示上传速度。 |
queueID | false | 设置上传队列容器DOM元素的ID,如果为false则自动生成一个队列容器。 |
queueSizeLimit | 999 | 队列最多显示的任务数量,如果选择的文件数量超过此限制,将会发出onSelectError事件。此项并非最大文件上传数量,如果要限制最大上传文件数量,应设置uploadLimit。 |
removeCompleted | true | 是否自动将已完成任务从队列中删除,如果设置为false则会一直保留此任务显示。 |
removeTimeout | 3 | 如果设置了任务完成后自动从队列中删除,则可以规定从完成到被移除的时间间隔。 |
requeueErrors | false | 如果设置为true,则单个任务上传失败后将返回错误,并重新加入任务队列上传。 |
successTimeout | 30 | 文件上传成功后,服务端返回成功标志,此项设置返回结果的超时时间。 |
swf | ‘uploadify.swf’ | uploadify.swf文件的相对路径。 |
uploader | uploadify.php/uploadify.action | 后台处理程序的相对路径。 |
uploadLimit | 999 | 最大上传文件数量,如果达到或者超出限制将会触发onUploadError事件。 |
width | 120 | 设置文件浏览按钮的宽度。 |