一、.Net Core上传组件Uploader简介
1.前端jquery框架封装
2.后端,支持Asp.Net 和 Asp.Net Core 矿建
3.数据传输模式支持:WebScoket 、Ajax、Form 模式上传到服务器。
最新版本资料请参考官网:http://www.gongjuji.net/uploader/
二、Asp.Net Core 使用步骤 (此案例这对WebScoket方式讲解)
注意:跟多上传方式接收,请去官网了解。
第一步:安装组件 ,根据.net Core框架,选择对应的版本
Install-Package UploadHandleCore
第二步:配置后端文件接收,从straup 文件中 的Configure方法
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
#region 绑定上传
//绑定WebSocket处理,接收成功后,生成缩略图
UploadHandle.ServerInfo.SitePath = env.WebRootPath; //使用wwwroot作为根目录
app.Map("/upload/common", (con) =>
{
con.UseWebSockets();//启用webscoket
con.Use((ctx, n) =>
{
Receiver _receive = new Receiver(ctx, "upload/logo");
_receive.OnSuccess += (data) =>
{
};
return _receive.DoWork();
});
});
#endregion
}
第三步:前端组件引用,和绑定
前端组件代码下载,请点击:http://www.gongjuji.net/uploader/
引用内容如下:
html组件初始化如下:
效果如下:
特别说明,如果需要图片对话框剪切,请引用 Cover.js 组件,组件代码,请去官网下载。
三、使用示例说明
1.上传文件,配置类型 ,options配置
type: 'single',//控件类型 /* * 1.简单形式(single,单纯上传文件,自动提交) * 2.对话框形式(dialog,需要图片剪切处理) * 3.前台压缩,大小图片上传 (imgdouble) :不改变原图片的比例,在指定范围内等比例缩放,小图(minWidth*minHeight); 大图((maxWidth*maxHeight)) * 4.前台最大比例,图片处理(fixedsize):固定比例缩放,最大化图片显示,剩余空间填充空白 * 5.前台最大比例,图片剪切(fixedcut):固定比例缩放(maxWidth*maxHeight),最大化图片剪切 * 6.前台裁剪,大小图处理(cutdouble):固定最小图(minWidth*minHeight),最大图(maxWidth*maxHeight),裁剪图片 */
onSuccess(res){} ,处理上传后的逻辑
响应结果参数:
2.大小图上传
如果是大小图上传 ,响应结果 :res.small 小图信息;res.big 大图信息
/**大小图片前台处理,后台简单处理模式,上传成功后显示图片**/
var uploader = $('#uploadBtn').uploader({
url: 'ws://www.gongjuji.net/common/upload',
fileExts: 'jpg;png',
text: '大小图模式上传',
more: true,//是否可以上传多个
auto: true, //是否自动上传
type: 'imgdouble',
minWidth: 100,
minHeight: 100,
maxWidth: 800,
maxHeight: 600,
handleType: '0',//对于大小图模式最好不要自动处理
subfolder: 'touxiang',
onSuccess: function (data) {
//添加到列表,每个图片上传成功都会触发
var row = $('.row');
var col = $(' ');
var a = $('');
a.attr('href', data.big.relativeName);
a.attr('title', '点击查看大图').attr('target','_blank');
a.append('');
col.append(a);
row.append(col);
}
});
3.图片剪切上传
注意:裁剪模式需要引用cover.js 组件
/*********剪切图片,后台自动处理模式+指定根目录的子文件夹保存**********/
var uploader = $('#uploadBtn').uploader({
url: 'ws://www.gongjuji.net/common/upload',
fileExts: 'jpg;png',
type: 'dialog',
text: '剪切图片模式',
subfolder: 'content',//默认后台处理简单模式 ,指定子文件夹
more: false,//是否可以上传多个
auto: true, //是否自动上传
coverParams: {
title: '设置头像',
targetWidth: 100,
targetHeight: 100
},
onSuccess: function (data) {
$('#name').text(data.newName);
$('#relativeName').attr('src', data.relativeName);
}
});
4.图片固定大小,最大化剪切上传
去官网看更新文章吧。。。。
更多: