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