jQuery + SWFUpload + COS上传组件实战教程

需积分: 10 179 浏览量更新于2024-09-13 收藏 109KB DOC 举报

本文档详细介绍了如何在jQuery项目中整合SWFUpload和阿里云COS（Cloud Object Storage）上传组件，以实现文件上传功能。主要分为以下几个步骤： 1. 引入必要的资源: - 首先，你需要引入jQuery 1.4.2的核心库，这是项目的基础。确保它已经正确加载，因为后续的插件依赖于它。 - 然后，加载自定义的jQuery插件vinSwFUpload，包括其皮肤样式（vinSwFUpload-1.2-skin.css和vinSwFUpload-1.2.css）以及主插件功能的js文件(vinSWFUpload-1.2.js)。 - 此外，为了实现上传功能，官方的SWFUpload核心库(SWFUpload-2.2.js)也是必不可少的。 2. 创建上传组件的容器: 在HTML结构中，你需要在<body>部分添加一个带有特定id（如"vinEdit"）的<div>元素，这个元素将作为文件上传的容器，用户将在其中选择和上传文件。 3. 初始化上传插件: 使用jQuery的$(document).ready()函数，确保DOM结构加载完毕后再执行插件初始化。在这个函数内部，你需要设置上传组件的相关配置，如： - `uploadURL`: 用于实际上传文件到COS的服务地址。 - `width` 和 `height`: 定义插件的可视区域大小。 - `sizeUnit`: 设置文件大小单位，这里设置为"M"表示兆字节。 - `skin`: 指定插件的外观风格，这里是"green"。 - `autoRemoveStoped`: 如果设置为`false`，意味着停止上传的文件不会自动从上传区域移除，可以进一步处理。 - `flashURL`: 这是SWFUpload的核心Flash文件的路径。通过以上步骤，你就可以在前端实现一个结合了jQuery、SWFUpload和COS的文件上传组件，用户可以方便地选择文件，并将其上传到指定的COS存储空间。这在构建网页应用时，尤其是需要处理大文件上传或需要与云端服务交互的应用中非常实用。记得根据实际项目的路径需求替换`<%=path%>`中的占位符，以便正确指向对应的文件和API。

jquery+SWFUpload+COS 上传组件的使用说明

1、文档编写目的：

此文档目的是介绍 jquery+swfUpload 编写的 jquery 上传插件

vinSefvinSwfUpload 的简单使用！

2.具体使用步骤：

一：

引入必须的 js 文件和 css 文件：

/*jquery1.4核心库*/

/*自定义jquery插件vinSwfUpload的皮肤css样式*/

/*自定义jquery插件vinSwfUpload的主要css样式*/

/*自定义jquery插件vinSwfUpload的jquery插件js*/

/*官方SwfUpload的核心js/

二：

在 body 中添加组件显示目标

三：

在 jqeury 中初始化插件

$(function() {

// 文档就绪

var path = "<%=path%>/uiwidget/vinSwfUpload-1.2/";

var upload = $("#vinEdit").vinSWFUpload( {

uploadURL:'<%=path%>/swf/upload',

width : 500,

heigth : 300,

sizeUnit:"M",

skin:"green",

autoRemoveStoped:false,

flashURL : path+"core/SWFUpload.swf",

addImgURl:path+"images/add.gif",

uploadImgURl:path+"/images/upload.png",

stopImgURl:path+"images/stop.png",

deleteImgURl:path+"images/trash.gif",

tipImgURl:path+"images/tip.gif"

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

iiswiner

粉丝: 1
资源: 31

jQuery + SWFUpload + COS上传组件实战教程

jquery+SWFUpload+COS上传组件的使用

jquery+SWFUpload+COS上传组件的使用 兼容ie6

自制jquery+SWFUpload+COS 多文件上传组件

利用jquery+SWFUpload+COS构建高效上传组件教程

Extjs3.3+swfUpload2.2实现多文件上传组件.pdf

jquery+swfupload+servlet_多文件上传

使用jQuery+SWFUpload+Commons-FileUpload实现带进度条的上传

jquery+swfupload+servlet_多文件上传,支持ctrl和shift多选择的功能

jquery_SWFUpload_COS上传组件的使用

Jquery+swfupload：实现Java后台多文件上传功能

最新资源

jquery+SWFUpload+COS上传组件的使用兼容ie6