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 #endregion 28 }
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.Now 26 }); 27 }); 28 } 29 #endregion 30 31 try 32 { 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 });