淘先锋技术网

首页 1 2 3 4 5 6 7

JQuery Ocupload是一个高度定制的文件上传插件。它结合了Flash和Ajax技术,可帮助您快速轻松地上传文件。

$(document).ready(function () {
$("#uploadBtn").ocupload({
name: "file",
action: "upload.php",
method: "POST",
allowedExtensions: "jpg|jpeg|gif|png",
maxSize: "2048",
beforeSend: function () {
//上传前调用函数
$("#uploadStatus").html("正在上传,请稍后...");
},
onSuccess: function (data) {
//上传成功调用函数
$("#uploadStatus").html("上传已完成!");
$("#uploadedImage").html("");
},
onError: function (error) {
//上传错误调用函数
$("#uploadStatus").html(error);
}
});
});

代码中,我们首先在document.ready事件处理程序中初始化了ocupload插件。此处我们将上传按钮的ID传递给ocupload()函数,使得插件可以通过此ID来确定文件上传的位置。

初始化插件的参数也非常重要。本例中,我们指定了上传文件的名称,上传方式,服务器端处理程序地址,允许上传的文件类型以及上传文件的最大尺寸等等。

在文件上传之前和成功上传之后,我们定义了beforeSend和onSuccess回调函数。beforeSend函数会在文件上传之前被调用,用于向用户显示上传过程的状态。而onSuccess函数会在上传完成后调用,并显示成功上传的状态和上传文件的链接。

当发生错误时,我们还指定了onError回调函数,以便向用户显示错误信息。

最后,在HTML页面上,我们需要为上传按钮和显示状态的区域设置ID。这些ID将在JavaScript代码中用到。