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代码中用到。