C#-图片上传

C#-图片上传:

controller:

 1 public JsonResult ExpressDeliverySign(ExpressDeliverySign_LO_IP model) 2  { 3 HttpFileCollectionBase files = Request.Files; 4 if (files != null && files.Count > 8) 5 return Json(new RetMsgM() { Success = false, Message = "限制最多上传八张图片" }); 6  7 List<HttpPostedFileBase> list = new List<HttpPostedFileBase>(); 8 if (files != null && files.Count > 0) 9  {10 for (int i = 0; i < files.Count; i++)11  {12 //检查文件类型13 HttpPostedFileBase file = files[i];14 if (!UploadImageType.Contains(Path.GetExtension(file.FileName.ToString()).ToLower()))15  {16 return Json(new RetMsgM() { Success = false, Message = "图片上传失败[不支持上传的文件类型]" });17  }18 if (file.ContentLength > 10 * 1024 * 1024)19  {20 return Json(new RetMsgM { Success = false, Message = "上传图片限制10M" });21  }22  list.Add(files[i]);23  }24  }25 return Json(_freightService.ExpressDeliverySign(model, list, UserInfo.UserID));26  }27 #endregion28 }

service层:

 1 public RetMsgM ExpressDeliverySign(ExpressDeliverySign_LO_IP model, List<HttpPostedFileBase> files, int userId) 2  { 3 //存在图片文件,进行图片上传 4 List<PicturePO> lstPicture = new List<PicturePO>(); 5 #region 图片处理 6 if (files.Any()) 7  { 8 //1.上传图片 9 UploadImageService uploadService = new UploadImageService();10 var resultPic = uploadService.UploadImage(files);11 if (!resultPic.Success)12 return retMsg.ExceptionResult("图片上传保存失败!");13 14 //图片地址15 var imageUrlList = resultPic.Custom as List<string>;16 imageUrlList.ForEach(it =>17  {18 lstPicture.Add(new PicturePO()19  {20 PictureType = (int)PictureTypeEnum.ExpressSign,21 OrderID = freightOrderInfo.FreightOrderID,22 URL = it,23 PlantType = PlantTypeEnum.PC.GetHashCode(),24 CreateBy = userId,25 CreateDate = DateTime.Now26  });27  });28  }29 #endregion30 31 try32  {33 if (new TMSFreightOrderManager().ExpressDeliverySign(lstPicture))34 retMsg = retMsg.SuccessResult();35  }36 catch (Exception ex)37  {38  Tools.LogManager.Error(ex);39 retMsg = retMsg.ExceptionResult(ex.Message);40  }41 return retMsg;42 43 }

HTML:

1 <div class="form-group">2 <label class="control-label">上传图片:</label>3 <div class="input-group input-group-sm">4 <button type="button" class="layui-btn" id="btnFirst">上传图片</button>5 (<span style="font-size: 10px; color: red;">限制最多上传四张</span>)6 <span id="ErrorMsg"></span>7 </div> </div>

JavaScript:

 1 layui.use(‘upload‘, function () { 2 var $ = layui.jquery; 3 var upload = layui.upload; 4 var uploadInst = upload.render({ 5 elem: ‘#btnFirst‘, 6 multiple: true, 7 auto: false, 8 accept: ‘file‘, 9 choose: function (obj) {10 uploadInst.config.elem.next()[0].value = ‘‘;11 $.upload.files = obj.pushFile();12 //var files = this.files = obj.pushFile();13 obj.preview(function (index, file, result) {14 15 var imageUrl = result;16  $.upload.uploadImages.push(file.name);17 if ($.upload.uploadImages.length > 4) {18 //删除文件19 delete $.upload.files[index];20 //获取数组的下标21 var indexs = $.upload.uploadImages.indexOf(file.name);22 $.upload.uploadImages.splice(indexs, 1);23 $.msg.warning("限制最多上传四张图片!");24 return false;25 } else if (file.size > 10 * 1024 * 1024) {26 //删除文件27 delete $.upload.files[index];28 //获取数组的下标29 var indexs = $.upload.uploadImages.indexOf(file.name);30 $.upload.uploadImages.splice(indexs, 1);31 $.msg.warning("限制上传文件最大10M!");32 return false;33 } else {34 var divImageNum = "img" + $.upload.uploadImages.length;35 $("#uploadImage").append(`36 <div id="${divImageNum}" style="display:inline;">37 <span style="position: absolute; background-color: #4c8dbb;" class="badge" onclick="delImage(‘${divImageNum}‘,‘${index}‘,‘${file.name}‘)">38 <i class="glyphicon glyphicon-trash"></i>39 </span>40 <img class="layui-upload-img" width="100" height="80" style="border:1px dashed #ccc;" src="${41 imageUrl}" />42 </div>`);43 var imgArrayUrl = $("#upload-list").val();44 if (imgArrayUrl == null || imgArrayUrl == "") {45 $("#upload-list").val(file.name);46 } else {47 $("#upload-list").val(imgArrayUrl + ";" + file.name);48  }49  }50 51  })52  },53 done: function (data) {54  }55 , error: function () {56 var demoText = $(‘#ErrorMsg‘);57 demoText.html(‘<span style="color: #FF5722;">上传失败</span>‘);58  }59  });60 });

 

相关文章