使用jQuery的Uploadify实现Ajax无刷新文件上传

"jQuery文件上传控件 Uploadify 是一个基于jQuery的高级文件上传工具，它支持AJAX无刷新上传、多文件同时上传以及显示上传进度，还允许用户删除已上传的文件。该控件要求使用jQuery版本1.4或以上，以及Flash Player 9.0.24以上的版本。Uploadify提供了两种版本，一种基于Flash，另一种基于HTML5，但HTML5版本需付费使用。本介绍主要聚焦于使用Flash的免费版本。官方网址为：http://www.uploadify.com/。" Uploadify的使用步骤如下： 1. 引入必要的文件：首先需要在HTML文档中引入`uploadify.css`用于样式定义，`jquery-1.7.2.min.js`作为jQuery库，以及`jquery.uploadify-3.1.min.js`作为Uploadify的核心JavaScript文件。 ```html <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> ``` 2. 创建文件输入元素：在HTML中创建一个`<input>`标签，类型设为`file`，并为其分配一个ID，例如`file_upload`。 ```html <input type="file" name="file_upload" id="file_upload"> ``` 3. 初始化Uploadify：使用jQuery选择器`$(function() {...})`来确保在DOM加载完成后执行初始化代码。调用`uploadify()`方法对文件输入元素进行初始化，指定SWF文件（`uploadify.swf`）和上传处理程序（`uploadify.php`）的位置。 ```javascript $(function() { $('#file_upload').uploadify({ 'swf': 'uploadify.swf', 'uploader': 'uploadify.php' // 其他选项可以在这里设置 }); }); ``` 4. 配置Uploadify选项：在初始化时，可以设置各种选项来自定义Uploadify的行为。例如，`auto`选项默认为`true`，意味着选择文件后会立即上传。如果设置为`false`，则需要手动触发上传。 ```javascript $(function() { $('#file_upload').uploadify({ 'swf': 'uploadify.swf', 'uploader': 'uploadify.php', 'auto': false // 设置为false，上传需手动触发 // 其他选项... }); }); ``` Uploadify的其他常见选项包括： - `queueID`：指定用于显示上传队列的元素ID。 - `queueSizeLimit`：允许的最大上传文件数量。 - `fileTypeDesc`：文件类型的描述文本。 - `fileTypeExts`：允许上传的文件扩展名列表。 - `buttonText`：上传按钮上的文字。 - `onSelect`：文件被选中时触发的回调函数。 - `onQueueFull`：队列满时触发的回调函数。 - `onProgress`：文件上传过程中触发的回调函数，可以用来显示进度条。 - `onComplete`：单个文件上传完成后触发的回调函数。 - `onError`：发生错误时触发的回调函数。 通过调整这些选项，你可以定制Uploadify以满足特定的项目需求。记得在实际使用中，根据你的项目结构正确配置`swf`和`uploader`路径，确保Flash和服务器端处理程序文件的可用性。