JQuery上传插件Uploadify并传参数（一）

**jQuery上传插件Uploadify详解及参数传递方法** 在Web开发中，文件上传功能是常见的需求，而jQuery的Uploadify插件提供了一种简洁、高效的方式实现这一功能。本篇文章将深入探讨Uploadify插件的基本使用，以及如何在上传过程中传递参数。 **一、Uploadify简介** Uploadify是一款基于jQuery的文件上传插件，它利用Flash技术实现了异步多文件上传，用户可以选择多个文件一次性上传，同时提供了丰富的自定义选项和事件处理机制，使得文件上传更加直观和友好。 **二、安装与配置** 1. **引入依赖**：首先需要在HTML页面中引入jQuery库和Uploadify的JavaScript及CSS文件，通常它们位于`uploadify/jquery.uploadify.js`和`uploadify/uploadify.css`路径下。 2. **HTML结构**：创建一个`input[type=file]`元素，作为Uploadify的触发器。例如： ```html <input type="file" id="fileInput" /> ``` 3. **初始化配置**：在JavaScript中，使用jQuery选择器找到该元素并初始化Uploadify，设置相关参数。例如： ```javascript $('#fileInput').uploadify({ 'uploader': 'uploadify/uploadify.swf', 'script': 'upload.php', // 服务器端处理文件上传的脚本 'cancelImg': 'uploadify/cancel.png', 'folder': '/uploads', 'queueID': 'fileQueue', 'auto': true, 'multi': true }); ``` **三、参数传递** Uploadify支持在上传文件时传递额外的参数到服务器端。有以下几种方式： 1. **'formData' 参数**：在初始化配置中，可以设置`formData`属性来添加POST数据。例如： ```javascript 'formData': { 'param1': 'value1', 'param2': 'value2' }, ``` 这些参数将会被附加到每个文件的上传请求中。 2. **'onQueueComplete' 事件**：在文件队列全部上传完成后，可以通过`onQueueComplete`事件动态设置参数。例如： ```javascript 'onQueueComplete': function(queueData) { var params = { 'totalFiles': queueData.filesUploaded, 'totalSize': queueData.totalSize }; $(this).uploadifySettings('formData', params); } ``` 这样，每次队列完成时，新的参数会被发送到服务器。 3. **'onSelect' 和 'onSelectOnce' 事件**：在用户选择文件时，可以通过这两个事件根据选定的文件动态设置参数。 **四、自定义样式与事件** Uploadify允许开发者通过CSS调整上传按钮和进度条的样式。同时，提供了一系列事件回调，如`onSelect`, `onOpen`, `onProgress`, `onComplete`等，可以根据需要进行定制化处理。 **五、其他高级特性** 1. **文件类型限制**：通过`'fileTypeDesc'`和`'fileTypeExts'`设置允许上传的文件类型。 2. **文件大小限制**：通过`'sizeLimit'`限制单个文件的最大大小。 3. **上传队列管理**：`'queueSizeLimit'`限制同时上传的文件数量，`'simUploadLimit'`限制同时上传的文件数。 4. **错误处理**：`'onError'`事件用于处理上传过程中出现的错误。 jQuery Uploadify插件以其易用性和灵活性，为开发者提供了强大的文件上传解决方案。通过合理的参数配置和事件处理，可以实现各种复杂的上传需求，同时保证用户体验。在实际项目中，结合后端语言如PHP、ASP.NET或Node.js等，可以构建出高效且友好的文件上传系统。