表单上传图片

在网页的表单中添加上传图片功能
1，在表单中创建一个区域存放图片。
（1）因为要考虑页面压缩挤压图片导致图片错位所以使用bootstrap中的col。默认宽度最小时候col-12（直接占满一行）， col-lg-3在大的布局情况下（col的宽度到lg的时候）就占3。
（2）指定row：图片比较小的时候要进行一个居中。
（3）justify-content-center在内容的中间对齐
（4）在img中 class：“img-fluid” 这个类是bootstrap提供的图片标签的样式，主要是绑定图片自适应的问题，会去自适应图片比例（fluid：填充）。
alt：提示作用，当图片未加载时显示一行文字提示。
style=“max-height:168px;”：限制最大高度，如果没有限制图片会把表单撑的非常高。

在ID外面加一个文件选择器，为了表单直接提交，一般把文件选择器放在外层。

页面中表单里面的效果

二，把图片在表单显示出来。
思路：首先触发一个文件选择器，当文件选择器change事件当数据发生改变时，就把读取到的文件获取出来变成file对象，在把file对象交给FileReader文件读取器。当文件读取器读取完后触发onload 的回调事件，并且会返回回调结果。
（1）通过双击打开文件选择器选择需要上传的图片（主要目的：触发文件选择器）。
//双击弹出文件选择框选择图片
$("#studentPicture").dblclick(function () {
//手动通过代码触发（upImage）点击事件
$("#upImage").click();
});
（2）完成这步可以双击打开文件选择器，但是选择到的图片还是无法显示，但已经绑定到图片框。然后就要使用一个方法文件读取器（FileReader），调用它的onload事件。
//文件读取器读取到files文件交给了FileReader对象（imgReader ）
var imgReader = new FileReader();
//调用它的onload 事件信息。文件读取器取到文件后的回调事件
imgReader.onload = function (event) {
//显示图片
$("#studentPicture").attr(“src”, event.target.result);
}
（3）读取upImage文件，change事件当数据发生改变时先获取它的文件出来，把获取到的文件变成file 对象，在把对象交给上步的文件读取器。
$("#upImage").change(function () {
//获取出文件选择器的第一个文件
var file = $("#upImage").get(0).files[0];//get是获取dom对象
//读取文件转化成URL
imgReader.readAsDataURL(file);
});
代码图：