首页 > 编程笔记 > JavaScript笔记
阅读:2
jQuery uploadify插件用法详解(附带实例)
uploadify 插件是一款来自国外的优秀第三方 jQuery 插件。它是基于 JavaScript 内的 jQuery 库编写的,结合了 AJAX 和 Flash,实现了多线程上传文件的功能。
uploadify 插件提供的功能主要包括:
下面简单介绍 uploadify 插件的属性、方法和事件。
可以根据下表中列出的属性对常用 uploadify 对插件进行相应的设置,代码如下:
【实例】使用 uploadify 插件实现批量上传文件的功能。由于使用 uploadify 插件上传文件时,需要一个服务器端文件来接收上传的文件,因此需要使用网页编程语言编写一个服务器端文件,本实例中使用 PHP 作为编写服务器端文件的网页编程语言。
程序开发步骤如下:
1) 创建新项目,默认主页为 index.php。
2) 在 index.php 的 HTML 代码中引入 jQuery 框架和 uploadify 插件所需的 JavaScript 脚本文件及 CSS 样式文件,代码如下:
3) 在 index.php 页面中添加一个 file 控件,id 属性值设置为 file_upload,用于选择文件,再添加一个上传按钮,代码如下:
4) 在 <head></head> 中编写代码,实现在页面加载后初始化 uploadify 插件,并设置插件的相关属性,其中包括上传文件类型、上传文件大小、是否可以选择多个文件上传以及是否自动上传等,通过设置这些属性可以非常灵活地控制文件上传。代码如下:
5) 处理文件上传的 uploadify 插件的 PHP 文件代码如下:

图 1 uploadify 插件的使用
uploadify 插件提供的功能主要包括:
- 能够一次性选择多个文件上传、查看文件上传进度、控制文件上传类型和大小、为每一步操作添加回调函数等;
- 此外 uploadify 插件还自带一个 PHP 文件,用于服务器端处理上传文件。
下面简单介绍 uploadify 插件的属性、方法和事件。
uploadify插件的属性
uploadify 插件的常用属性及说明如下表所示。属性 | 说明 |
---|---|
auto | 是否自动上传 |
buttonClass | 上传按钮样式 |
buttonText | 上传按钮文本 |
checkScript | 检查目标文件夹中是否存在与上传文件同名的文件 |
dnd | 是否允许拖放 |
dropTarget | 投放目标选择器 |
fileObjName | 定义服务器接收参数名称 |
fileSizeLimit | 上传文件的大小限制,该属性值为 0 则表示无限制 |
fileType | 允许上传的文件类型。要允许所有文件类型,则设置该属性值为 false;允许特定文件类型,则设置该属性值为 ['image/jpeg','video/*'] |
formData | 提交给服务器端的参数 |
width | 上传按钮宽度 |
height | 上传按钮高度 |
itemTemplate | 队列中项目的 HTML 标记 |
method | 上传文件的提交方法,取值 post 或 get |
multi | 是否允许多文件上传 |
overrideEvents | 指定多个插件默认事件中的事件,被指定的事件将不会执行 |
queueID | 指定用于显示上传队列的父级元素 id 属性值 |
queueSizeLimit | 限制每次选择上传文件的个数 |
removeCompleted | 文件上传完毕后,是否从上传队列中移除 |
simUploadLimit | 一次可上传的文件数量 |
truncateLength | 指定文件名称的截取长度,设置该属性值后,文件名称超过指定长度将会被截取 |
uploadLimit | 指定允许上传的最大文件数量 |
uploadScript | 上传处理脚本 |
可以根据下表中列出的属性对常用 uploadify 对插件进行相应的设置,代码如下:
$(document).ready(function() { $("#uploadify").uploadify({ 'uploadScript': 'uploadifive.php', // 上传处理脚本 'fileObjName': 'fileData', // 定义服务器接收参数名称 'method': 'post', // 上传文件的提交方法,取值 post 或 get 'formData': { "imgType": "normal" }, // 提交给服务器端的参数 'checkScript': '/Home/Check', // 检查目标文件夹中是否存在与上传文件同名的文件 'auto': false, // 是否自动上传 'multi': true, // 是否允许多文件上传 'width': 200, // 上传按钮宽度(单位:px) 'height': 50, // 上传按钮高度(单位:px) 'buttonText': '请选择文件', // 上传按钮文本 'buttonClass': false, // 上传按钮样式 'dnd': true, // 是否允许拖放 'removeCompleted': false, // 文件上传完毕后,是否从上传队列中移除 'queueID': false, // 指定用于显示上传队列的父级元素 id 属性值 'fileType': 'image/jpeg', // 允许上传的文件类型。要允许所有文件类型,则设置该属性值为 false;允许特定文件类型,则设置该属性值为 ['image/jpeg', 'video/*'] 'truncateLength': 0, // 指定文件名称的截取长度,设置该属性值后,文件名称超过指定长度将会被截取 'fileSizeLimit': '200MB', // 上传文件的大小限制,该属性值为 0 则表示无限制 'uploadLimit': 20, // 指定允许上传的最大文件数量 'simUploadLimit': 0, // 一次可上传的文件数量 'queueSizeLimit': 20 // 指定上传文件的个数 }); });
uploadify插件的方法
uploadify 插件的常用方法及说明如下表所示。方法 | 说明 |
---|---|
clearQueue() | 清除文件队列 |
cancel() | 取消文件上传 |
upload() | 上传文件 |
destroy() | 销毁上传实例 |
debug() | 输出 debug 日志 |
uploadify插件的事件
uploadify 插件的常用事件及说明如下表所示。事件 | 说明 |
---|---|
onInit | 在 uploadify 插件初始化结束时触发该事件 |
onFallback | 验证客户端浏览器是否兼容 |
onCheck | 验证客户端文件是否存在 |
onError | 验证客户端设定的约束 |
onSelect | 在每添加一个文件至上传队列时触发该事件 |
onDrop | 在文件被添加到该队列文件时触发该事件 |
onProgress | 在上传进度更新时触发该事件 |
onAddQueueItem | 在文件被添加到上传队列时触发该事件 |
onUpload | 在执行上传操作时触发该事件 |
onUploadFile | 在上传每一个文件时触发该事件 |
onUploadComplete | 在文件上传完成后触发该事件 |
onQueueComplete | 在队列中的所有文件上传完成时触发该事件 |
onCancel | 在上传被取消时触发该事件 |
onClearQueue | 在清空队列时触发该事件 |
onDestroy | 在 uploadify 插件被销毁时触发该事件 |
【实例】使用 uploadify 插件实现批量上传文件的功能。由于使用 uploadify 插件上传文件时,需要一个服务器端文件来接收上传的文件,因此需要使用网页编程语言编写一个服务器端文件,本实例中使用 PHP 作为编写服务器端文件的网页编程语言。
程序开发步骤如下:
1) 创建新项目,默认主页为 index.php。
2) 在 index.php 的 HTML 代码中引入 jQuery 框架和 uploadify 插件所需的 JavaScript 脚本文件及 CSS 样式文件,代码如下:
<script type="text/javascript" src="js/jquery-3.6.4.min.js"></script> <script type="text/javascript" src="js/jquery.uploadify-3.1.min.js"></script> <link rel="stylesheet" type="text/css" href="uploadify.css"/>
3) 在 index.php 页面中添加一个 file 控件,id 属性值设置为 file_upload,用于选择文件,再添加一个上传按钮,代码如下:
<h1>Uploadify HTML5 上传</h1> <form> <div id="queue"></div> <input id="file_upload" name="file_upload" type="file" multiple="true"> <a style="position: relative; top: 8px;" href="javascript:$('#file_upload').uploadifive('upload')">上传</a> </form>
4) 在 <head></head> 中编写代码,实现在页面加载后初始化 uploadify 插件,并设置插件的相关属性,其中包括上传文件类型、上传文件大小、是否可以选择多个文件上传以及是否自动上传等,通过设置这些属性可以非常灵活地控制文件上传。代码如下:
$(function() { $('#file_upload').uploadifive({ 'buttonText' : '选择文件', // 设置上传按钮文本 'auto' : false, 'checkScript': 'check-exists.php', 'fileType' : '.jpg,.jpeg,.gif,.png', 'formData' : { 'timestamp' : '<?php echo $timestamp;?>', 'token' : '<?php echo md5("unique_salt" . $timestamp);?>' }, 'queueID' : 'queue', 'uploadScript': 'uploadifive.php', 'onUploadComplete' : function(file, data) { console.log(data); } }); });
5) 处理文件上传的 uploadify 插件的 PHP 文件代码如下:
<?php /* UploadiFive Copyright (c) 2012 Reactive Apps, Ronnie Garcia */ // Set the upload directory $uploadDir = '/uploads/'; // Set the allowed file extensions $fileTypes = array('jpg', 'jpeg', 'gif', 'png'); // Allowed file extensions $verifyToken = md5('unique_salt' . $_POST['timestamp']); if (!empty($_FILES) && $_POST['token'] == $verifyToken) { $tempFile = $_FILES['Filedata']['tmp_name']; $uploadDir = $_SERVER['DOCUMENT_ROOT'] . $uploadDir; $targetFile = $uploadDir . $_FILES['Filedata']['name']; // Validate the filetype $fileParts = pathinfo($_FILES['Filedata']['name']); if (in_array(strtolower($fileParts['extension']), $fileTypes)) { // Save the file move_uploaded_file($tempFile, $targetFile); echo 1; } else { // The file type wasn't allowed echo 'Invalid file type.'; } } ?>实例运行效果如下图所示:

图 1 uploadify 插件的使用