新增图片到数据库

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

作者：彭水清

撰写时间：2019/5/18

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

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

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

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

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

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

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

    <div class="col-12
    col-lg-3 text-center">

  <img src="" alt="" width="150" height="180" id="WGPicture" class="border border-primary" ondblclick="chooseImageFile     ('fileWGSmallImage');" />

<input type="file" name="fileWGPicture" id="fileWGSmallImage" hidden accept="image/*" onchange="showImgToView      ('fileWGSmallImage');" />

<p>双击选择图片</p>

   </div>

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事件、把图片转化为二进制操作。

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