JQuery上传控件 jUploader 使用

jUploader 1.0 Demo

Download: jquery.jUploader-1.01.js 9.75kb

Download: jquery.jUploader-1.01.min.js 5.38kb

Download: jquery.jUploader-1.01-demo.rar 1.03mb

To upload a file, click on the button below. Supported in IE6+, FF3.6+, Chrome6+, Safari4+. More info go to www.kudystudio.com

全局设置:


// 全局配置（这样就不必每次初始化时都加上下面的设置）
$.jUploader.setDefaults({
cancelable: true, // 可取消上传
allowedExtensions: ['jpg', 'png', 'gif'], // 只允许上传图片
messages: {
upload: '上传',
cancel: '取消',
emptyFile: "{file} 为空，请选择一个文件.",
invalidExtension: "{file} 后缀名不合法. 只有 {extensions} 是允许的.",
onLeave: "文件正在上传，如果你现在离开，上传将会被取消。"
}
});


实例（一）:


$.jUploader({
button: 'upload-button1', // 这里设置按钮id
action: 'upload.aspx?test_cancel=1', // 这里设置上传处理接口，这个加了参数test_cancel=1来测试取消 // 上传完成事件
onComplete: function (fileName, response) {
// response是json对象，格式可以按自己的意愿来定义，例子为： { success: true, fileUrl:'' }
if (response.success) {
$('#photo1').attr('src', response.fileUrl); // 这里说明一下，一般还会在图片附近加添一个hidden的input来存放这个上传后的文件路径(response.fileUrl)，方便提交到服务器保存
} else {
alert('上传失败');
}
}
});


实例（二）:


$.jUploader({
button: 'upload-button2', // 这里设置按钮id
action: 'upload.aspx?test_cancel=1', // 这里设置上传处理接口 // 开始上传事件
onUpload: function (fileName) {
$('#photo2').hide();
$('#loading2').show();
}, // 上传完成事件
onComplete: function (fileName, response) {
// response是json对象，格式可以按自己的意愿来定义，例子为： { success: true, fileUrl:'' }
if (response.success) {
$('#loading2').hide();
$('#photo2').attr('src', response.fileUrl).show();
} else {
$('#photo2').show();
$('#loading2').hide();
alert('上传失败');
}
}, // 取消上传事件
onCancel: function (fileName) {
$('#photo2').show();
$('#loading2').hide();
}
});


实例（三）:


$.jUploader({
button: 'upload-button3', // 这里设置按钮id
action: 'upload.aspx?test_cancel=1', // 这里设置上传处理接口 // 开始上传事件
onUpload: function (fileName) {
$('#tip').text('正在上传 ' + fileName + ' ...');
}, // 上传完成事件
onComplete: function (fileName, response) {
// response是json对象，格式可以按自己的意愿来定义，例子为： { success: true, fileUrl:'' }
if (response.success) {
$('#photo3').attr('src', response.fileUrl);
$('#tip').text(fileName + ' 上传成功。');
} else {
$('#tip').text('上传失败');
}
}, // 取消上传事件
onCancel: function (fileName) {
$('#tip').text(fileName + ' 上传取消。');
}, // 系统信息显示（例如后缀名不合法）
showMessage: function (message) {
$('#tip').text(message);
}
});


实例（四）:


$.jUploader({
button: 'upload-button4', // 这里设置按钮id
action: 'upload.aspx?test_cancel=1', // 这里设置上传处理接口 // 开始上传事件
onUpload: function (fileName) {
jBox.tip('正在上传 ' + fileName + ' ...', 'loading');
}, // 上传完成事件
onComplete: function (fileName, response) {
// response是json对象，格式可以按自己的意愿来定义，例子为： { success: true, fileUrl:'' }
if (response.success) {
jBox.tip('上传成功', 'success');
$('#photo4').attr('src', response.fileUrl);
} else {
jBox.tip('上传失败', 'error');
}
}, // 系统信息显示（例如后缀名不合法）
showMessage: function (message) {
jBox.tip(message, 'error');
}, // 取消上传事件
onCancel: function (fileName) {
jBox.tip(fileName + ' 上传取消。', 'info');
}
});


参数说明：


$.jUploader = function (options); // 使用接口，options = $.jUploader.defaults ，请查看使用例子
$.jUploader.setDefaults = function (defaults); // 设置全局配置，请参考 $.jUploader.defaults$.jUploader.defaults = {
button: null, // 按钮对象或ID
action: 'upload.aspx', //处理上传文件接口
allowedExtensions: [], //允许上传的后缀数组例如：['jpg','gif']，默认为[]不做限制
cancelable: true, // 是否可取消上传 // events
onUpload: function (fileName) { }, //开始上传事件，fileName为本地选择的文件名
onComplete: function (fileName, response) { }, //完成上传事件，fileName为本地选择的文件名,response为服务器返回的json对象
onCancel: function (fileName) { }, //取消上传事件，fileName为本地选择的文件名
// messages
messages: {
upload: 'Upload', //上传按钮文字
cancel: 'Cancel', //取消按钮文字
emptyFile: "{file} is empty, please select files again without it.", //空文件时提示文字
invalidExtension: "{file} has invalid extension. Only {extensions} are allowed.", //后缀不允许时提示文字
onLeave: "The files are being uploaded, if you leave now the upload will be cancelled." //正在上传时用户要离开页面提示文字
},
showMessage: function (message) { //显示文字，默认使用alert()
alert(message);
},
debug: false
};

文章出处：http://www.kudystudio.com/jUploader/index.html