本文共 2183 字，大约阅读时间需要 7 分钟。

开发工具与关键技术： Visual Studio 2015 mvc

作者：彭水清

撰写时间：2019/5/18

首先，我们来看一下效果图再看代码部分

新增双击选择图片添加到数据库

怎么样才能知道图片已经成功新增到数据库？那么就要到SQL Server 2014 Management Studio数据库里看数据有没有添加进来

这是添加完图片后数据库里显示的数据，把图片转化为二进制数组，保存到数据库，通过下面的图可以看到图片已经添加成功了。

那么要怎样才能实现这种效果呢？请看下面的代码：

首先隐藏input标签，给img双击事件，双击img标签，

调用chooseImageFile(‘fileWGSmallImage’)实现点击input标签弹出文件选择框

   
  
    
    
    
双击选择图片
   
   

1、通过文件获取的接口来获取选择的图片并显示出来

2、FileReader接口提供了一个异步的API，通过这个API可以从浏览器中异步访问文件系统中的数据。因此，FileReader接口可以读取文件中的数据，并将读取的数据放入到内存中去

3、选择照片:用FileReader对象来读取本地数据，并且将数据结果赋值给image的src

//打开file表单，选择图片

function chooseImageFile(inputFileID){ $("#" + inputFileID).click(); }

//创建FileReader对象

var imgReader = new FileReader();

//正则表达式 过滤图片文件

regexImageFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)  $/i;

//file表单改变事件，将选择的图片显示到img元素

function showImgToView(inputFileId) {

//选择图片文件

var imgFile = $("#" + inputFileId).get(0).files[0];//console.log(imgFile);

//判断上传文件是否为图片格式

if (!regexImageFilter.test(imgFile.type)) {layer.msg("请选择有效的图片文件", { icon: 0, title: "提示" });}else {//readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL;//FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。imgReader.readAsDataURL(imgFile);}}

//读取文件 onload事件

imgReader.onload= function (evt) {//console.log(evt);//将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。$("#WGPicture").attr("src", evt.target.result);$("#UWGPicture ").attr("src", evt.target.result);};

下面就是控制器代码：

//声明一个byte[](字节型数组)来保存新增的图片byte[] imgFile = null;//判断图片文件是否为空if (fileWGPicture != null && fileWGPicture.ContentLength> 0){//初始化数组的长度，为节省空间，长度由实际上传的图片的长度决定imgFile = new byte[fileWGPicture.ContentLength];//读取该图片文件//将图片转为流结束位置//将流读取为byte[]，参数：byte[]，读取开始位置，读取字节数fileWGPicture.InputStream.Read(imgFile,0, fileWGPicture.ContentLength);}通过上面的代码，新增图片到数据库就已经完成了。新增图片到数据库用到了FileReader对象、正则表达式、onload事件、把图片转化为二进制操作。

@水平有限，错误和失误在所难免，若有如何意见和建议，请不吝指正，谢谢！

转载地址：https://blog.csdn.net/weixin_44540414/article/details/90612481 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！