JavaScript和ASP.Net实现多个图片文件一起上传并删除服务器上图片的方法

介绍

本文将介绍如何使用JavaScript和ASP.NET实现多个图片文件一起上传到服务器上并且实现删除服务器上上传的图片的功能。

实现多张图片上传

使用原生的JavaScript，实现单张上传和批量上传的功能，以下是代码实现：

// 单张上传
function uploadImage(inputId, showId) {
  var input = document.getElementById(inputId);
  var show = document.getElementById(showId);

  if (typeof FileReader === 'undefined') {
    alert('您的浏览器不支持图片上传，请升级浏览器');
    input.removeAttribute('multiple');
    input.setAttribute('disabled', 'disabled');
  } else {
    // 支持多个文件上传
    input.addEventListener('change', function() {
      var files = this.files;
      var html = '';

      for (var i = 0, len = files.length; i < len; i++) {
        var file = files[i];

        // 只允许图片文件
        if (!/image\/\w+/.test(file.type)) {
          alert('您上传的文件不是图片，请重新选择');
          continue;
        }

        // 限制图片大小 不超过2MB
        if (file.size > 2 * 1024 * 1024) {
          alert('您上传的图片超过2MB，请重新选择');
          continue;
        }

        var reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onload = function() {
          html += '
';
          html += 'this.result + '"/>';
          html += '
';

          show.innerHTML = html;
        };
      }
    }, false);
  }
}

// 批量上传
uploadImage('input-upload', 'show-upload');

实现图片删除

使用ASP.NET，通过前端Ajax请求到后端处理数据，实现删除服务器上图片的功能，以下是代码实现：

// 前端Ajax请求
function deleteImage(id) {
  if (!confirm('确定删除该张图片吗？')) {
    return false;
  }

  $.ajax({
    url: '/deleteimage',
    type: 'post',
    data: {id: id},
    success: function(res) {
      if (res.code === 200) {
        alert('删除成功');
      } else {
        alert('删除失败');
      }
    },
    error: function(err) {
      console.log(err);
    }
  });
}

// 后端C#代码
 // 删除图片
        [HttpPost]
        public ActionResult DeleteImage(string id)
        {
            try
            {
                // 删除图片
                var img = db.tblImages.Find(id);
                if (img != null)
                {
                    db.tblImages.Remove(img);
                    db.SaveChanges();

                    // 删除文件
                    var path = Server.MapPath(img.Path);
                    if (System.IO.File.Exists(path))
                    {
                        System.IO.File.Delete(path);
                    }

                    return JsonResultHelper.CreateResult(Enums.ResultCode.Success);
                }

                return JsonResultHelper.CreateResult(Enums.ResultCode.ImageNotExist);
            }
            catch (Exception e)
            {
                log.ErrorFormat("删除图片失败: {0}", e.Message);
                return JsonResultHelper.CreateResult(Enums.ResultCode.Failed);
            }
        }