一、.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/
引用内容如下：
-
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
-
<script src="http://cdn.jnqianle.cn/uploader/uploader6.3.min.js">
</script>
-
<link href="http://cdn.jnqianle.cn/uploader/uploader6.3.min.css" rel="stylesheet">
html组件初始化如下：
-
<div id="uploadOne" class="uploader uploader-primary">
</div>
-
<script>
-
$(
'#uploadOne').uploader({
-
url:
'ws://' + location.host +
'/upload/common',
-
text:
'选择文件',
-
type:
'single',
//上传类型
-
fileExts:
'jpg;png;gif;',
//支持的文件类型
-
maxSize:
1024 *
1024 *
5,
//文件大小，单位字节
-
onSuccess:
function(res){
-
//上传成功触发
-
console.info(res);
-
}
-
});
-
</script>
效果如下：
特别说明，如果需要图片对话框剪切，请引用 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){} ,处理上传后的逻辑
响应结果参数：
- newName: 上传后的文件名
- relativeName: 服务器上的相对地址
- size: 文件大小
- status: 1 上传状态
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 = $(
' <div class="col-xs-6 col-md-3" />');
-
var a = $(
'<a class="thumbnail" />');
-
a.attr(
'href', data.big.relativeName);
-
a.attr(
'title',
'点击查看大图').attr(
'target',
'_blank');
-
a.append(
'<img src=' + data.small.relativeName +
' />');
-
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.图片固定大小，最大化剪切上传
去官网看更新文章吧。。。。
更多：
HTTP协议简介1
C#域名操作，正则匹配域名
C# 常见Url操作实例（一）、正则表达式匹配URl
转载：https://blog.csdn.net/u011127019/article/details/113415523
查看评论