uploader上传控件介绍

Git源代码地址:https://github.com/tianma3798/Uploader

点击下载:

当前版本:v6.2

演示实例:

前台常用参数说明
defaults默认参数以及配置说明:
var defaults = {
    url: uploadCfg.url,//上传地址
    text: '选择文件', //上传按钮文本
    type: 'single',//控件类型  
    /*
    * 1.简单形式(single,单纯上传文件,自动提交)
    * 2.对话框形式(dialog,需要图片剪切处理)
    * 3.前台压缩,大小图片上传 (imgdouble) :不改变原图片的比例,在指定范围内等比例缩放,不修改图片内容 
    * 4.前台最大比例,图片处理(fixedsize):固定比例缩放,最大化图片显示,剩余空间填充空白
    */
    handleType: '0',//后台处理模式 0-自动模式,上传到网站upload文件夹中    1--简单模式,上传到WebConfig指定文件夹中   2---临时处理模式上传到临时文件夹
    uploadType: 1,//上传处理方式 1-----Ajax上传处理(默认)  2----WebSocket上传处理(主要用于应对单文件上传)
    subfolder: '',//指定后台保存的子文件夹
    more: false, //是否支持多个文件
    debug: true, //如果是调试模式,指定输出内容

    maxWidth: 1960,//前台压缩时,最大宽度
    maxHeight: 1000,//前台压缩时,最大高度
    minWidth: 300,//前台压缩时,最小宽度
    minHeight: 300,//前台压缩时,最小高度
    background: 'white',// 在使用到背景处理时的,默认背景
    tempFile: uploadCfg.tempFile,//设置临时文件夹
    auto: true,//是否自动上传文件
    isImg: true,//是否是图片,如果是图片提供预览功能
    fileExts: 'jpg;png;gif;bmp;jpeg',//允许上传的文件扩展名,*----没有显示
    timeout: 30000,
    onCheck: function (file) { return true; },//开始上传验证扩展
    onSendImg: function (dataUrl, handle) { handle(); }, //图片发送服务器前验证,需要制定isImg=true
    onSuccess: function () { },//上传成功,如果是‘imgdouble’模式返回图片文件 {imgBig:'',imgSmall:''}
    onAllSuccess: function (data) { },//当全部上传成功时触发
    onError: function (msg) {
        uploadCfg.error(msg);
    },//上传异常处理
    onClick: function () { },//按钮 点击事件
    maxSize: 1024 * 1024 * 1024,//文件最大大小,单位字节
    getMaxSize: function () {// 用于计算显示最大值
        return getShowSize(this.maxSize);
    },
    /**图片剪切参数配置**/
    coverParams: { }
}
coverParams 弹框模式默认参数及说明:
var defaults = {
    showRight: false,//指定是否显示右侧面板
    title: '上传图片',//对话框标题
    itemWidth: 450,
    itemHeight: 450,
    targetWidth: 200, //剪切后图片的宽度
    targetHeight: 100, //剪切后图片的高度
    onYes: function () {
    },
    onCancel: function () { },//取消按钮事件
    onClose: function () {
        return true;//返回值,确定是否能销毁对话框
    } //关闭事件
}
后台使用示例代码
一般处理程序中使用(Receiver):

后台接收目录等处理由前台控件指定

LogHelper.LogHelper _log = new LogHelper.LogHelper();
public void ProcessRequest(HttpContext context)
{
    Receiver _receive = new Receiver();
    //接收文件成功
    _receive.OnSuccess = (data) =>
    {
        //此处,有需要的情况下,执行数据库操作
        _log.WriteLine(string.Format("新文件名{0},旧文件名{1}", data.NewName, data.OldName));
    };
}
一般处理程序中使用(AjaxReceiver):

后台接收目录等处理由前台控件指定

LogHelper.LogHelper _log = new LogHelper.LogHelper();
public void ProcessRequest(HttpContext context)
{
    AjaxReceiver _receive = new AjaxReceiver();
    //接收文件成功
    _receive.OnSuccess = (data) =>
    {
        //此处,有需要的情况下,执行数据库操作
        _log.WriteLine(string.Format("新文件名{0},旧文件名{1}", data.NewName, data.OldName));
    };
}