基于jQuery的Uploadify文件上传插件教程

需积分: 10 57 浏览量更新于2024-09-17 收藏 150KB PDF 举报

"Uploadify是一个基于jQuery的文件上传插件，尤其适用于图片上传。它结合了jQuery、Flash和后台处理脚本（支持多种编程语言）来实现用户友好的Web文件上传功能。Uploadify v2.1.0由Ronnie Garcia和Travis Nickels开发，并在www.uploadify.com和www.ronniesan.com上提供。" Uploadify的主要功能是为网站提供一种简单、高效的文件上传解决方案，特别适合用于图片上传。通过这个插件，用户可以在网页上通过一个友好的界面选择并上传文件到服务器。由于它依赖于Flash，因此能够跨平台工作，并且提供了丰富的自定义选项。要使用Uploadify，首先你需要完成以下步骤： 1. 访问http://www.uploadify.com下载最新版本的Uploadify。 2. 将下载的压缩包解压到你的项目目录中。 3. 在需要使用Uploadify的HTML页面中，引入jQuery库、swfobject.js以及Uploadify插件的js文件。确保在<head>部分加入以下代码： ```html <script type="text/javascript" src="/path/to/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="/path/to/swfobject.js"></script> <script type="text/javascript" src="/path/to/jquery.uploadify.v2.1.0.min.js"></script> ``` 4. 接着，在页面<head>内设置$.ready事件，如下所示，这将初始化Uploadify插件并替换input元素为一个浏览按钮： ```javascript $(document).ready(function(){ $('#someID').uploadify({ 'uploader': '/path/to/uploadify.swf', 'script': '/path/to/uploadify.php', 'folder': '/path/to/uploads-folder', 'cancelImg': '/path/to/cancel.png' // 其他选项... }); }); ``` Uploadify还提供了许多可配置的选项，例如： - `'uploader'`：指向SWF文件的路径，用于处理实际的文件上传。 - `'script'`：后端处理脚本的URL，用于接收并处理上传的文件。 - `'folder'`：指定上传文件保存的服务器目录。 - `'cancelImg'`：取消上传操作时显示的图像路径。除此之外，还有其他如`'queueID'`（队列元素的ID）、`'auto'`（是否自动上传）、`'multi'`（是否允许多文件上传）、`'simUploadLimit'`（同时上传的最大文件数）等选项，可以根据具体需求进行设置。Uploadify还支持事件监听，如`'onSelect'`（文件选择时触发）、`'onUploadSuccess'`（文件上传成功时触发）等，这些事件可以用来添加额外的逻辑或反馈给用户。 Uploadify v2.1.0是一个强大的jQuery插件，使得文件上传变得更加简单和直观，尤其对于需要大量图片上传的网站来说，它是一个理想的选择。通过其易用的API和丰富的配置选项，开发者可以轻松地集成到自己的项目中，为用户提供无缝的文件上传体验。

Developed by Ronnie Garcia and Travis Nickels

www.uploadify.com

www.ronniesan.com .

Uploadify 可以做什么？

一个基于 jQuery 上传文件的插件，该插件引用 jQuery, F lash 和后台处理脚本（可以基于不同

的语言进行开发脚本），上传文件 WEB 站点服务器上。

该怎么利用 Uploadify

Implementation of the plug-in is very easy and only relies on one JQuery function call to initiate.

Uploadify 用起来非常简单，只要调用 jQuery 的初始化函数即可。

1. 下载最新版本 uploadify:http://www.uploadify.com

2. 解压下载的压缩包到指定目录。

3. 在相应的页面 jQuer y 脚本， swfobject script 和 Uploadif y 插件。将以下代码段加到 <head>

中：

4. 在页面 <head> 中增加 $.ready 事件，如下代码段：

当页面装载初始化结束， $.ready 事件将会 input 隐藏，将用按钮 browse 代替。到此，该

插件的使用准备工作全部就绪。

可用选项

Uploadify v2.1.0

$(document).ready(function() {

$('#someID').uploadify({

'uploader': '/path/to/uploadify.swf',

'script': '/path/to/uploadify.php',

'folder': '/path/to/uploads-folder',

'cancelImg': '/path/to/cancel.png'

});

</script>

下载后可阅读完整内容，剩余6页未读，立即下载

kuaile6881

粉丝: 1
资源: 10

基于jQuery的Uploadify文件上传插件教程

jquery.uploadify.v2.1.0.js 上传

分享校jquery.uploadify-v2.1.0上传插件用法

jquery_uploadify_v3.2版 jquery.uploadify.js

jquery.uploadify-v2.1.0.rar

最新uploadify.v2.1.0下载含demo

jQuery插件（artDialog4， codemirror，My97DatePicker，ueditor，jquery.uploadify-v2.1.0 ）

jquery.uploadify-w2.1.0

uploadify_v2.1.4 上传代码

uploadify_v3.2

uploadify_v3.2.1文件上传插件

最新资源