开发工具与关键技术：VS，MVC
作者：陈梅
撰写时间：2019年5月6日
图片代码来源于老师教程
上传图片常用到我们登录页面的用户头像，和新增时一些需要需用到上传图片这种技术，这也是一个常用到的一个技术。上传图片的技术为两步的，一是选中所需要的图片，二是绑定选中到的图片。
上传图片我们要用到正则表达式，正则表达式是用于提取自己想要的数据。在这上传图片中，我们主要的作用就是提取自己想要的图片。图片的格式有很多种，所以要进行图片格式的筛选，有可能图片的格式与不是图片的格式一样，所以就要进行筛选。上传图片的控制器是没代码的，有的也只是判断图片是否一致，在修改中会用到。
这个就是上传图片是要用到的正则表达式的代买，主要用处是判断所选的文件和数据是否是图片，而且图片有很多类型，我们还要把图片中的每一种类型都要进行一个判断，如果不是图片就上传不成功，如果是图片就会上传成功。然后我们把写好的正则表达式赋值给regexImageFilter的参数里。正则表达式的用处不止有判断是否有图片的功能，还可以判断省份证号码，电话号码，还有一些QQ号啊，有关于数字的，就可以进行限制，限制输入的数据必须是数字，不能是其他字符，其中身份证的限制的要比较多一点。所以正则表达式也是我们做项目中必须要用到的知识点，这个要弄懂，学会。
这个是制作上传页面的布局，我们用个盒子来包着，然后设计图片的宽，高，给个id用于写js的代码，点击事件，然后再用input标签来进行隐藏的按钮部分，用于最后进行。P标签是提示文字。我们这里的读取文件是靠file来读取的，然后再把选中到的图片给loadImgToEimg这个函数里，然后就会传输图片了。然后就再读取一下文件，我们就实例化一下数据，var imgReader = new FileReader，声明一个其中FileReader的意思就是用来读取文件的，图片也属于文件的一种，所以就是用来读取图片的。读取文件还要写一个onload事件，但我们取触发onload事件的时候，我们就能执行我们要的数据的绑定，但是在绑定图片之前，我们还需要验证我们所选的东西是否是图片，如果是才能进行绑定制作上传图片是要input标签来布局的。然后再进行一个判断，判断选择到的是不是有效图片。判断是跟正则表达式进行判断，拿imgfFile的其中一种类型与正则表达式中的类型进行判断，看看这种图片的类型在正则表达式中有没有，如果有就把图片用链接的格式返回，然后绑定到我们需要的框里面。如果我们选择的是图片，就用URL的格式进行返回，如果不是图片，就会有个提示，你选择的图片不是图片。
注意的是，这里是要双击才能选择图片的，而不是直接单击就能选图片，因为是双击事件，我们要触发双击事件，就要在image里引用双击事件，在onchange里面的是触发，所以我们就要用到一个方法，就是showImageFile，这个方法的作用是引用双击事件去触发input的双击事件，所以就有了这个函数，这个函数就只有一个代码，而这个代码所写的点击，是点击imageFileId的函数，所以我们看到是点击了图片，实际我们点击的是imageFileId，这样我们看起来就像是图片打开的，实际不是。然后我们双击空白框的时候就会弹出一个框。然后就这样打开一个框，供自己去选择自己的图片。上传图片的方法中有个代码是readAsDataURL，这个代码的意思是作为URL的格式来返回。把读取的数据转化成URL的格式，在做这些之前要进行判断，进行判断的就是正则表达式。是否为图片，打开这个框使用到input类型才能打开，而且双击是有按钮的，只是按钮被我隐藏了，所以我们点击的时候依然是用按钮来点击的。在这里我已近限制一切不关于图片的文件都显示不了，所以就展示不了但选择的不是图片时的提示语的效果出来。最后选择自己用到的图片，一个图片上传的技术就完整了，接下看看上传完图片的效果。
因为我们已经定义好了宽高，所以不管我们选择的是多大的图片，这里都会自动缩小成我们自己先定义好的宽高大小，如果你们觉得压缩的图片不好看，可以自己去调整好宽高。使宽高到合适的样子，上传图片技术分享就到这里了。
相关文章：