图片上传

开发工具与关键技术：VS C#
作者： 谭智聪
撰写时间：2020年8月21日

上传图片：
我们先在项目中创建一个文件夹来专门保存图片的，因为图片占内存比较大，一般不选择直接保存到数据库中，而是先将图片保存到项目的文件夹中，然后再将保存到文件中的图片路径保存到数据库中。

1、 给img标签绑定双击事件 设置样式宽高

<img src="" id="userPicture" ondblclick="showImageSelectDialog()" style="width: 150px; height: 218px;" />

2、要用File类型的文件框 Accept属性是指定文件类型

@* ###隐藏的文件选择框，用于弹出用户头像选择 accept由于筛选图片*@
<!--如果不限制图像的格式，可以写为：accept="image/*"。accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。-->
<input type="file" hidden id="userPictureFile" accept="image/jpeg,image/png,image/jpg,image/gif,image/bmp" onchange="loadImgToImg()" />

3、 自定义图片

//学生图片
   function showPicture(rowData) {
     
   	  var picture = rowData.studentPicture;//图片
      if (picture != undefined && picture != null && picture != '') {
     
          return '+ picture + '\')">查  看';
      }
      else {
     
          return "未上传";
      }
   }

4、 查看图片

function openUserPicture(picture) {
     
	//图片路径
    var pictureUrl = '@Url.Content("~/Document/studentPicture/")' + picture;
    //图片元素
    var img = '+ pictureUrl + '" style="max-width: 500px;max-height: 500px;">';
    //使用layer显示图片
    layer.open({
     
    	type: 1,// 页面层
        title: false,//关闭标题
        closeBtn: 0,//不显示关闭按钮
        shadeClose: true,//点击遮罩层关闭弹窗
        content: img //弹窗显示内容
    });
}

5、 用户头像图片选择并显示

	//（1）选择：打开图片文件选择
   function showImageSelectDialog() {
     
    	//使用jqury触发文件选择框的点击事件
     $("#userPictureFile").click();
	}

	//2、正则验证图片并显示
    //文件读取器
    var imgReader = new FileReader();
    //图片文件 正则表达式过滤image/jpeg,image/png,image/jpg,image/gif,image/bmp
	regexImageFilter = /^(?:image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png)$/i;
	//3、文件选择控件改变事件 -- 将选择的图片显示到 img元素
    function loadImgToImg() {
     
        //选取选择图片
        var imgfFile = $("#userPictureFile").get(0).files[0];
        //判断选择的文件扩展名是否符合正则表达式
        if (regexImageFilter.test(imgfFile.type)) {
     
            //使用FileReader读取图片并转为URL
            imgReader.readAsDataURL(imgfFile);
        } else {
     
            alert("选择的不是一个有效的图片文件");
        }
    }
    //文件读取 onload事件，将读取到图片显示的到Img元素
    imgReader.onload = function (evt) {
     
        $("#userPicture").attr("src", evt.target.result);
	}

6、 图片上传不能使用get或者post请求，这几种方法会解析上传的文件
要使用ajax请求
还需要告诉JQuery不要去处理发送的数据和设置Content-Type请求头：
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头

7、 控制器要用（HttpPostedFileBase）来接收，这个类是专门用来提供图片上传或文件的
保存上传文件：
一、上传图片会出现的情况：
1、 之前为空，现在没有（不做处理）
2、 之前为空，现在上传图片（新增现在）
3、 之前上传图片，现在没有（使用旧的）
4、 之前上传图片，现在上传图片（替换：新增现在 删除旧的）

二、
1、修改保存需要查询出之前图片信息（新增图片不需要查出之前的图片信息）
2、判断是否上传了图片
3、获取文件后缀名
4、声明文件名称
5、获取文件路径
6、保存文件
7、判断以前是否存在图片，有就直接删除

具体代码如下：