【.net core】yisha框架imageupload组件多图上传修改

 框架\wwwroot\lib\imageupload\1.0\js路径下imgup.js文件，参照旧版本代码和修改代码修改

(function ($) {"use strict";var deleteParent;var deleteDisplay = 'none';var defaults = {fileType: ["jpg", "png", "bmp", "jpeg", "gif"],   // 上传文件的类型fileSize: 1024 * 1024 * 200                 // 上传文件的大小 10M};$.fn.imageUpload = function (option, param) {if (typeof option == 'string') {return $.fn.imageUpload.methods[option](this, param);}var _option = $.extend({}, $.fn.imageUpload.defaults, option || {});var target = $(this);var id = target.attr("id");var inputFileId = id + "_file";var html = '';html += '<section class="img-section">';html += '    <div class="z_photo upimg-div clear">';html += '       <section class="z_file fl">';if (_option.canAdd == 1) {html += '           <img src="' + _option.context + 'lib/imageupload/1.0/img/add.png" class="add-img">';deleteDisplay = 'block';}/*** 旧版本代码*///html += '           <input type="file" name="' + inputFileId + '" id="' + inputFileId//    + '" class="file-image" callback="' + _option.uploadImage + '" context="'//    + _option.context + '" limit="' + _option.limit//    + '"  value="" accept="image/jpg,image/jpeg,image/png,image/bmp" />';/*** 20231024修改* 为input元素增加multiple属性*/html += '           <input type="file" name="' + inputFileId + '" id="' + inputFileId+ '" class="file-image" callback="' + _option.uploadImage + '" context="'+ _option.context + '" multiple limit="' + _option.limit+ '"  value="" accept="image/jpg,image/jpeg,image/png,image/bmp" />';html += '       </section>';html += '   </div>';html += '</section>';html += '<aside class="mask works-mask">';html += '   <div class="mask-content">';html += '       <div class="del-p">您确定要删除图片吗？</div>';html += '       <div class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></div>';html += '   </div>';html += '</aside>';target.append(html);target.find(".wsdel-ok").click(function () {$(".works-mask").hide();var numUp = deleteParent.siblings().length;if (numUp < 6) {deleteParent.parent().find(".z_file").show();}deleteParent.remove();});target.find(".wsdel-no").click(function () {$(".works-mask").hide();});$("#" + inputFileId).change(function () {prepareUploadImage(inputFileId);});};$.fn.imageUpload.defaults = {uploadImage: '',    // 上传图片回调limit: 10,          // 上传限制context: '',        // 当前页面根目录canPreview: 1,      // 是否可以预览(0不可以，1可以)canAdd: 1           // 是否可以添加(0不可以，1可以)};$.fn.imageUpload.methods = {getImageUrl: function (target) {var imageUrl = '';var list = $(target).find('.up-section').find('.up-img');for (var i = 0; i < list.length; i++) {if (i == 0) {imageUrl += $(list[i]).attr("src");} else {imageUrl += ';';imageUrl += $(list[i]).attr("src");}}return imageUrl;},setImageUrl: function (target, imageUrl) {if (imageUrl) {var id = $(target).attr("id");var inputFileId = id + "_file";var context = $("#" + inputFileId).attr("context");var urlArr = imageUrl.split(';');for (var i = 0; i < urlArr.length; i++) {if (urlArr[i] != "") {var deleteId = ys.getGuid();var imageName = urlArr[i].substring(urlArr[i].lastIndexOf('/') + 1);var html = '';html += '<section class="up-section fl">';html += '   <span class="up-span"></span>';html += '   <img id="' + deleteId + '" class="close-upimg" style="display:' + deleteDisplay + '" src="' + context + 'lib/imageupload/1.0/img/delete.png" />';if (urlArr[i].indexOf('http') > -1) {html += '   <img class="up-img" src="' + urlArr[i] + '" />';}else {html += '   <img class="up-img" src="' + context + ys.trimStart(urlArr[i], '/') + '" />';}html += '   <p class="img-name-p">"' + imageName + '"</p>';html += '</section>';$(html).insertBefore($(target).find(".z_file"));$("#" + deleteId).on("click", function () {$("#" + inputFileId).imageUpload("deleteImage", deleteId)});}}$(".up-span").Huipreview();$("#" + inputFileId).imageUpload("checkImageLimit")}},deleteImage: function (target, deleteId) {var _target = $(target);var inputFileId = _target.attr("id");if (!!event) {event.preventDefault();event.stopPropagation();}$(".works-mask").show();deleteParent = $("#" + deleteId).parent();$("#" + inputFileId).imageUpload("checkImageLimit");},checkImageLimit: function (target) {var _target = $(target);var num = _target.parents(".z_photo").find(".up-section").length;var limit = _target.attr("limit");if (num >= limit) {_target.parent().hide();} else {_target.parent().show();}}};function prepareUploadImage(inputFileId) {var target = $("#" + inputFileId);var callback = target.attr("callback");var limit = target.attr("limit");if (!callback || callback == '') {alert("请提供上传方法");return;}var inputFile = document.getElementById(inputFileId);var imgContainer = target.parents(".z_photo"); //存放图片的父亲元素var fileList = inputFile.files; //获取的图片文件//遍历得到的图片文件var num = imgContainer.find(".up-section").length;var totalNum = num + fileList.length;  //总的数量if (fileList.length > limit || totalNum > limit) {alert("上传图片数目不可以超过" + limit + "个，请重新选择");  //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个}else if (num < limit) {validateUpload(fileList);var uploadSuccess = function (imgPath) {/*** 旧版本代码*///var section = $("<section class='up-section fl loading'>");//imgContainer.prepend(section);//var span = $("<span class='up-span'>");//span.appendTo(section);//var context = $("#" + inputFileId).attr("context");//var deleteId = ys.getGuid();//var deleteImg = $("<img id='" + deleteId + "' class='close-upimg'> style='display:" + deleteDisplay + "'").on("click", function () {//    $("#" + inputFileId).imageUpload("deleteImage", deleteId)//});//deleteImg.attr("src", context + "lib/imageupload/1.0/img/delete.png").appendTo(section);//var realImg = $("<img class='up-img up-opcity'>");//realImg.attr("src", imgPath);//realImg.appendTo(section);//var p = $("<p class='img-name-p'>");//p.html(imgPath.substring(imgPath.lastIndexOf('/') + 1)).appendTo(section);/*** 20231024修改* 增加方法多文件上传功能*/ if (typeof (imgPath) == 'string') {var section = $("<section class='up-section fl loading'>");imgContainer.prepend(section);var span = $("<span class='up-span'>");span.appendTo(section);var context = $("#" + inputFileId).attr("context");var deleteId = ys.getGuid();var deleteImg = $("<img id='" + deleteId + "' class='close-upimg'> style='display:" + deleteDisplay + "'").on("click", function () {$("#" + inputFileId).imageUpload("deleteImage", deleteId)});deleteImg.attr("src", context + "lib/imageupload/1.0/img/delete.png").appendTo(section);var realImg = $("<img class='up-img up-opcity'>");realImg.attr("src", imgPath);realImg.appendTo(section);var p = $("<p class='img-name-p'>");p.html(imgPath.substring(imgPath.lastIndexOf('/') + 1)).appendTo(section);}else {imgPath.forEach(function (item) {var section = $("<section class='up-section fl loading'>");imgContainer.prepend(section);var span = $("<span class='up-span'>");span.appendTo(section);var context = $("#" + inputFileId).attr("context");var deleteId = ys.getGuid();var deleteImg = $("<img id='" + deleteId + "' class='close-upimg'> style='display:" + deleteDisplay + "'").on("click", function () {$("#" + inputFileId).imageUpload("deleteImage", deleteId)});deleteImg.attr("src", context + "lib/imageupload/1.0/img/delete.png").appendTo(section);var realImg = $("<img class='up-img up-opcity'>");realImg.attr("src", item);realImg.appendTo(section);var p = $("<p class='img-name-p'>");p.html(item.substring(item.lastIndexOf('/') + 1)).appendTo(section);})}setTimeout(function () {$(".up-section").removeClass("loading");$(".up-img").removeClass("up-opcity");}, 450);$("#" + inputFileId).imageUpload("checkImageLimit");};/*** 旧版本代码*///var currentFile = fileList[fileList.length - 1];//只返回最后一个文件内容//doCallback(eval(callback), [currentFile, uploadSuccess]);/*** 20231024修改* 将所有的上传内容返回自定义方法*/doCallback(eval(callback), [fileList, uploadSuccess]);}}function validateUpload(files) {var arrFiles = [];//替换的文件数组for (var i = 0, file; file = files[i]; i++) {//获取文件上传的后缀名var newStr = file.name.split("").reverse().join("");if (newStr.split(".")[0] != null) {var type = newStr.split(".")[0].split("").reverse().join("");console.log(type + "===type===");if (jQuery.inArray(type, defaults.fileType) > -1) {// 类型符合，可以上传if (file.size >= defaults.fileSize) {alert(file.size);alert('您这个"' + file.name + '"文件大小过大');} else {// 在这里需要判断当前所有文件中arrFiles.push(file);}} else {alert('您这个"' + file.name + '"上传类型不符合');}} else {alert('您这个"' + file.name + '"没有类型, 无法识别');}}return arrFiles;}// 动态调用方法，并传递参数function doCallback(fn, args) {fn.apply(this, args);}
})(jQuery);

 页面代码，替换原有页面初始化和自定义上传触发方法

//初始化组件方法
$("#thumbImage").imageUpload({ uploadImage: 'uploadThumbImage', limit: 10, context: ctx });//limit参数，设置单次上传和总上传数量function uploadThumbImage(file, callback) {//自定义的上传触发方法var formdata = new FormData();//formdata.append("fileList", file);//file为单文件数据（File类型）console.log('uploadThumbImage', file)for (var i = 0; i < file.length; i++) {//file为多文件数据（FileList类型）formdata.append("fileList", file[i]);//手动给formdata中添加文件流内容}ys.ajaxUploadFile({//url: '@GlobalContext.SystemConfig.ApiSite' + '/File/UploadFile?fileModule=@UploadFileType.News.ParseToInt()',url: '@Url.Content("~/File/uploadImagesProc")' + "?fileModule=@UploadFileType.News.ParseToInt()",data: formdata,success: function (obj) {if (obj.Tag == 1) {if (callback) {//callback('@GlobalContext.SystemConfig.ApiSite' + obj.Data);callback(obj.Data);}}else {ys.msgError(obj.Message);}}})}

后台代码，可直接复制，UploadFileProc方法需在FileHelper类中创建

 /// <summary>/// 单/多文件上传/// </summary>/// <param name="files"></param>/// <returns></returns>[HttpPost]public async Task<TData<object>> uploadImagesProc(int fileModule, IFormFileCollection fileList){TData<object> obj = new TData<object>();obj = await FileHelper.UploadFileProc(fileModule, fileList);return obj;}
#region 上传多个文件/// <summary>/// 上传多个文件/// </summary>/// <param name="fileModule"></param>/// <param name="files">文件流集合</param>/// <returns></returns>public async static Task<TData<object>> UploadFileProc(int fileModule, IFormFileCollection files){string dirModule = string.Empty;TData<object> obj = new TData<object>();if (files == null || files.Count == 0){obj.Message = "请先选择文件！";return obj;}//IFormFile file = files[0];List<object> resultObj = new List<object>();foreach (IFormFile file in files){TData objCheck = null;objCheck = CheckFileExtension(Path.GetExtension(file.FileName), ".jpg|.jpeg|.gif|.png");if (objCheck.Tag != 1){obj.Tag = 0;obj.Message = objCheck.Message;return obj;}switch (fileModule){case (int)UploadFileType.Portrait:objCheck = CheckFileExtension(Path.GetExtension(file.FileName), ".jpg|.jpeg|.gif|.png");if (objCheck.Tag != 1){obj.Message = objCheck.Message;return obj;}dirModule = UploadFileType.Portrait.ToString();break;case (int)UploadFileType.News:if (file.Length > 5 * 1024 * 1024) // 5MB{obj.Message = "文件最大限制为 5MB";return obj;}objCheck = CheckFileExtension(Path.GetExtension(file.FileName), ".jpg|.jpeg|.gif|.png");if (objCheck.Tag != 1){obj.Message = objCheck.Message;return obj;}dirModule = UploadFileType.News.ToString();break;case (int)UploadFileType.Import:objCheck = CheckFileExtension(Path.GetExtension(file.FileName), ".xls|.xlsx");if (objCheck.Tag != 1){obj.Message = objCheck.Message;return obj;}dirModule = UploadFileType.Import.ToString();break;default:obj.Message = "请指定上传到的模块";return obj;}string fileExtension = TextHelper.GetCustomValue(Path.GetExtension(file.FileName), ".png");string newFileName = SecurityHelper.GetGuid() + fileExtension;string dir = "Resource" + Path.DirectorySeparatorChar + dirModule + Path.DirectorySeparatorChar + DateTime.Now.ToString("yyyy-MM-dd").Replace('-', Path.DirectorySeparatorChar) + Path.DirectorySeparatorChar;string absoluteDir = Path.Combine(GlobalContext.HostingEnvironment.ContentRootPath, dir);string absoluteFileName = string.Empty;if (!Directory.Exists(absoluteDir)){Directory.CreateDirectory(absoluteDir);}absoluteFileName = absoluteDir + newFileName;try{using (FileStream fs = System.IO.File.Create(absoluteFileName)){await file.CopyToAsync(fs);fs.Flush();}resultObj.Add(Path.AltDirectorySeparatorChar + ConvertDirectoryToHttp(dir) + newFileName);//obj.Data = ;//obj.Message = Path.GetFileNameWithoutExtension(TextHelper.GetCustomValue(file.FileName, newFileName));//obj.Description = (file.Length / 1024).ToString(); // KB//obj.Tag = 1;}catch (Exception ex){obj.Tag = 0;obj.Message = ex.Message;}}if (resultObj.Count > 0){obj.Tag = 1;obj.Message = "上传成功";obj.Data = resultObj;}return obj;}#endregionpublic static string ConvertDirectoryToHttp(string directory){directory = directory.ParseToString();directory = directory.Replace(Path.DirectorySeparatorChar, Path.AltDirectorySeparatorChar);return directory;}public static TData CheckFileExtension(string fileExtension, string allowExtension){TData obj = new TData();string[] allowArr = TextHelper.SplitToArray<string>(allowExtension.ToLower(), '|');if (allowArr.Where(p => p.Trim() == fileExtension.ParseToString().ToLower()).Any()){obj.Tag = 1;}else{obj.Message = "只有文件扩展名是 " + allowExtension + " 的文件才能上传";}return obj;}public class TextHelper{/// <summary>/// 获取默认值/// </summary>/// <param name="value"></param>/// <param name="defaultValue"></param>/// <returns></returns>public static string GetCustomValue(string value, string defaultValue){if (string.IsNullOrEmpty(value)){return defaultValue;}else{return value;}}/// <summary>/// 截取指定长度的字符串/// </summary>/// <param name="value"></param>/// <param name="length"></param>/// <returns></returns>public static string GetSubString(string value, int length, bool ellipsis = false){if (string.IsNullOrEmpty(value)){return value;}if (value.Length > length){value = value.Substring(0, length);if (ellipsis){value += "...";}}return value;}/// <summary>/// 字符串转指定类型数组/// </summary>/// <param name="value"></param>/// <param name="split"></param>/// <returns></returns>public static T[] SplitToArray<T>(string value, char split){T[] arr = value.Split(new string[] { split.ToString() }, StringSplitOptions.RemoveEmptyEntries).CastSuper<T>().ToArray();return arr;}}