C#图片上传

基本上所有的管理平台,只要是涉及到数据的保存往往都有图片的上传。比如说,要记录一个商品需要存放商品的图片,方便查看;保存一个用户的信息需要存放用户的头像等等。
图片的上传操作很简单,一般会有两个操作:
一、 获取图片并显示

  1. 获取文件
    在html中input标签有一个type值为file的属性,通过设置该属性的input标签会变成一个文件选择器,使用它便可以获取到文件。
    在这里插入图片描述在这里插入图片描述

  2. 显示图片
    在实际项目中,选择到保存的图片需要预览。所以我们一般不会直接使用该标签,而是通过方法去调用。
    在这里插入图片描述

在写好一个file类型的input基础上,再写一个img标签,该标签用于显示预览图片。然后给img设置一个点击事件,通过这个点击事件去调用file文件选择器的点击。
在这里插入图片描述

在input标签上有一个accept属性,由于我们只需要选择图片类型的文件,那么可以通过该属性去设置一个自定义筛选。
在这里插入图片描述
给input设置一个id,通过点击img标签调用选择文件,页面需要显示的是img,而不是input,所以需要给input设置一个hidden属性让它隐藏起来,隐藏之后还是可以调用它。
在这里插入图片描述
接下来就是图片的显示预览。
要显示预览图片需要创建一个文件读取器,通过文件读取器将选择的文件读取出来。
在这里插入图片描述

在读取之前还需要通过正则判断文件是否为图片,毕竟通过自定义筛选只是说可以更便捷的查找图片,而实际还是可以选择所有文件,如果选择的不是一个图片,那么便不能允许它上传。
在这里插入图片描述

首先定义一个图片文件的正则表达式,再给input设置一个onchange()事件,当选择文件之后,它便会发生改变,在它改变的时候调用一个事件获取到该文件类型,判断该类型必须是一个图片类型的文件,不然便返回提示。
C#图片上传_第1张图片
当input内容发生改变时触发事件。通过上图id获取方式得到该input值时是一个jQuery对象数组,而我们选择只需要一个文件,如果有多个文件那么我们只取第一个(get(0))。在该对象中有一个files对象数组,该数组存放的便是需要的文件数据。
在files数组的对象中有一个type属性,该属性记录了该文件的类型,所以直接通过判断该文件类型是否通过创建图片正则表达式的匹配,如果不满便返回提示,满足则通过之前创建好的文件读取器将文件转换为Base64编码,这个编码是一个路径编码,这个编码可以直接作为路径使用。
在这里插入图片描述
最后给读取器写一个onload事件,它会在文件读取完成之后去执行这个方法。该方法有一个回调参数,这个参数便是刚刚读取出后文件对象。找到内部的target对象中的result属性,该属性记录的是刚刚Base64编码后的数据,直接将它赋值给创建的img标签的src属性。
效果展示:在这里插入图片描述

二、 提交图片数据并保存
在提交图片数据时一般是和其它数据(用户、商品等信息)一起提交的,平时提交数据用的都是post提交。现在有图片数据就需要使用ajax()提交。
C#图片上传_第2张图片
数据需要先存放到formData中,使用append方法创建一个字段并对应赋值,再通过ajax提交将form提交到指定路径上(后台)。在这里插入图片描述在这里插入图片描述
控制器传参时需要将图片字段单独通过HttpPostedFileBase进行接收,这是一个派生类的方法。
C#正常新增判断数据之后在最后一步之前进行图片验证,首先要判断存放图片的路径是否存在(在数据保存时,一般不会将图片数据直接保存到数据库中,都会在项目内部开辟一个文件夹专门存放图片。不然很影响数据的加载)。
在这里插入图片描述
判断创建的文件夹是否不存在,不存在就添加该路径(文件处理一般都用IO流的写法)。
C#图片上传_第3张图片
判断传入的图片数据是否有值,然后获取到文件的扩展名再以自己的方式去创建出一个能保证唯一性的名字并拼接上获取的文件扩展名组成一个图片名称,最后拼接成文件保存的路径(该路径一定是要加上文件名称,不然会异常显示部分路径未读取到)并将图片通过SaveAs()方法保存到该路径。
在数据库中存放的只是一个图片的名称,为了方便读取时直接通过路径拼接获取图片信息(图片名称赋值给保存数据库表数据的图片字段)。

你可能感兴趣的:(C#四大核心知识点,c#,jquery)