1. Introduction to .Net Core upload component Uploader7.0
1. The current version is v7.0, and the front-end framework has been enriched and upgraded
2. Front-end jquery framework package, cover.js, Tencent Cloud cos-js-sdk-v5.min.js
3. Backend, support Asp.Net and Asp.Net Core mining construction
4. Data transmission mode support: WebScoket, Ajax , Form mode upload to the server.
For the latest version information, please refer to the official website: Introduction to uploader upload control - Micro toolset
2. Back-end installation, front-end introduction, refer to the previous article: .Net Core upload component_.Net Core image upload processing component_uploadcore_天马3798的博客-CSDN博客
Reminder: Install v6.0 or v.5.0 series
3. Configuration instructions
1.type , control type
type: 'single',//控件类型
/*
* 1.简单形式(single,单纯上传文件，自动提交)
* 2.对话框形式(dialog，需要图片剪切处理)
* 3.前台压缩，大小图片上传 (imgdouble) ：不改变原图片的比例，在指定范围内等比例缩放，小图(minWidth*minHeight); 大图((maxWidth*maxHeight))
* 4.前台最大比例，图片处理（fixedsize）：固定比例缩放，最大化图片显示，剩余空间填充空白
* 5.前台最大比例，图片剪切（fixedcut）:固定比例缩放(maxWidth*maxHeight)，最大化图片剪切
* 6.前台裁剪，大小图处理（cutdouble）:固定最小图(minWidth*minHeight)，最大图(maxWidth*maxHeight)，裁剪图片
* 7.前端压缩，图片上传（imgsingle）:不改变图片的比例，在指定范围内等比例缩放，小图(minWidth*minHeight); 大图((maxWidth*maxHeight))
*/2.uploadType, upload protocol type
uploadType: 1,//upload processing method
1-----Ajax upload processing (default)
2----WebSocket upload processing (mainly used to deal with single file upload)
3----tencent Tencent cloud upload mode
3. Other parameters:
subfolder: '', //Specify the subfolder saved in the background
more: false, //Whether multiple files are supported; default 0 does not support multiple file uploads, 2; multiple file uploads are supported, but one by one; 3 : Support multi-file and multi-connection upload
moreCount: 5, //Maximum number of uploads supported
debug: false, //If it is in debug mode, specify the output content
maxWidth: 1960,//When the foreground is compressed, the maximum width
maxHeight: 1000,//When the foreground is compressed, the maximum height
minWidth: 300,//When the foreground is compressed, the minimum width
minHeight: 300,//When the foreground is compressed, the minimum height
background: 'white',//When using background processing, the default background
tempFile: uploadCfg.tempFile,//Set the temporary folder
auto: true,//Whether to automatically upload files
isImg: false,//Whether it is a picture, if so The picture provides a preview function
quality:0.8,//The default quality and size of the exported image is 0-1
fileExts: 'jpg;png;gif;bmp;jpeg',//The file extensions allowed to be uploaded, *----no display
timeout: 30000,
4. Use case arrangement, 6 dozen common scenarios
1. Simple file upload, single
/*******使用WebScoket 方式处理传输*******/
var uploader = $('#uploadBtn').uploader({
url: 'ws://' + location.host + '/upload/common',
fileExts:'*',
text: '简单上传按钮',
maxSize:1024*1024*1000,
more:true,
debug:true,
onSuccess: function (data) {
console.info(data);
$('#name').text(data.newName);
$('#relativeName').text(data.relativeName);
}
});2. Image compression on the drawing + not changing the image ratio, imgsingle
/*******使用WebScoket 方式处理传输*******/
var uploader = $('#uploadBtn').uploader({
url: 'ws://' + location.host + '/upload/common',
fileExts:'jpg;png;gif;jpeg',
text: '图片上传按钮',
type:'imgsingle',
maxSize:1024*1024*1000,
more:true,
//isImg:true,
debug:true,
maxWidth: 1200,
maxHeight: 1200,
onSuccess: function (data) {
console.info(data);
$('#name').append('<div>'+data.newName+'</div>');
$('#relativeName').append('<div>'+data.relativeName+'</div>');
$('#result').append('<img src="'+data.relativeName+'" />')
}
});3. Fixed size image upload + cropped image, fixedcut
/*******使用WebScoket 方式处理传输*******/
var uploader = $('#uploadBtn').uploader({
url: 'ws://' + location.host + '/upload/common',
fileExts:'jpg;png;gif;jpeg',
text: '图片上传按钮',
type:'fixedcut',
maxSize:1024*1024*1000,
more:true,
//isImg:true,
debug:true,
maxWidth: 200,
maxHeight: 200,
onSuccess: function (data) {
console.info(data);
$('#name').append('<div>'+data.newName+'</div>');
$('#relativeName').append('<div>'+data.relativeName+'</div>');
$('#result').append('<img src="'+data.relativeName+'" />')
}
});4. Upload size image + do not change the image ratio, imgdouble
/*******使用WebScoket 方式处理传输*******/
var uploader = $('#uploadBtn').uploader({
url: 'ws://' + location.host + '/upload/common',
fileExts: "jpg;png",
text: '选择图片',
maxSize: 1024 * 1024 * 1000,
more: true,
debug: true,
type: "imgdouble",
minWidth: 100,
minHeight: 100,
maxWidth: 1200,
maxHeight: 1200,
onSuccess: function (data) {
console.info(data);
var small = data.small;
var big = data.big;
$('#imgSmallInfo #name').text(small.newName);
$('#imgSmallInfo #relativeName').text(small.relativeName);
$('#imgSmallInfo img').attr('src', small.relativeName);
$('#imgBigInfo #name').text(big.newName);
$('#imgBigInfo #relativeName').text(big.relativeName);
$('#imgBigInfo img').attr('src', big.relativeName);
}
});5. Size image upload + cut image compression, cutdouble
/*******使用WebScoket 方式处理传输*******/
var uploader = $('#uploadBtn').uploader({
url: 'ws://' + location.host + '/upload/common',
fileExts: "jpg;png",
text: '选择图片',
maxSize: 1024 * 1024 * 1000,
more: true,
debug: true,
type: "cutdouble",
minWidth: 100,
minHeight: 100,
maxWidth: 1200,
maxHeight: 1200,
onSuccess: function (data) {
console.info(data);
var small = data.small;
var big = data.big;
$('#imgSmallInfo #name').text(small.newName);
$('#imgSmallInfo #relativeName').text(small.relativeName);
$('#imgSmallInfo img').attr('src', small.relativeName);
$('#imgBigInfo #name').text(big.newName);
$('#imgBigInfo #relativeName').text(big.relativeName);
$('#imgBigInfo img').attr('src', big.relativeName);
}
});6. Select the cropped image to upload, dialog
/*******使用WebScoket 方式处理传输*******/
var uploader = $('#uploadBtn').uploader({
url: 'ws://' + location.host + '/upload/common',
fileExts:'jpg;png;gif;jpeg',
text: '图片上传按钮',
type:'dialog',
maxSize:1024*1024*1000,
more:false,
debug:true,
coverParams: {
title:'选择头像',
targetWidth:300,
targetHeight:300
},
onSuccess: function (data) {
console.info(data);
$('#name').text(data.newName);
$('#relativeName').text(data.relativeName);
$('img').attr('src',data.relativeName)
}
});7. Upload to Tencent Cloud (internal use, learn more and add WeChat: tianma104, private chat)
/*******使用tencent 方式处理传输 视频 mp4*******/
//不需要指定上传路径
var uploader = $('#uploadBtn').uploader({
fileExts: 'mp4',
text: '视频上传按钮',
type: 'single',
maxSize: 1024 * 1024 * 1000,
more: false,
debug: true,
uploadType: 3,//使用腾讯云方式
//oldFileName: '1677044999702-35.mp4', // 重点指定就的视频文件名，可以执行远程删除任务
oldFileName:'',
onSuccess: function (data) {
console.info(data);
$('#name').text(data.newName);
$('#relativeName').text(data.absoluteName);
$('video').attr('src', data.absoluteName)
}
});More:
.Net Core upload component_.Net Core image upload processing component