上传图片

上传图片

作者：代富强 撰写日期：2020.8.6
上传图片：
很多网站都会有应用到图片上传功能，就那现在正在学习的飞机订票系统的例子来说。每一个工号都有属于自己的头像，而头像就需要在开通工号功能处开通工号时上传图片上去
。虽然只是一个小功能，但是对小白或者外行来说已经算是比较有意思的东西了。
在写代码的时候，为了方便以后再次打开文件能够快速想起每一句代码是干什么的，要养成常写注释的好习惯，就算以后上班了，忘记一个小功能怎么写，回头来看现在写的代码思路还是会很清晰。
所以这里先写上注释分割代码区域，接下来写上文件读取器
var imageReader = new FileReader。然后在对读取的图片文件进行正则表达式过滤一下图片文件regexImageFilter = /^(?:image/bmp|image/gif|image/jpg|image/jpeg|image/png)$/i;其实正则表达式可写也可不写。然后写上文件读取器onload事件，在读取文件完成后触发
imageReader.onload = function (evt) {
console.log(evt);
$("#userPicture").attr(“src”, evt.target.result);
}。userPicture是头像的id。
接着写双击图片触发文件输入框的点击事件：
function showImageSelectDialog() {
$("#userPictureFile").click();
}。showImageSelectDialog来自页面布局时给头像加的ondblclick

；
userPictureFile是一个隐藏文件选择控件的id

。
文件输入框改变事件，改变时读取图片并加以判断：
function loadImgToImg() {
//获取文件输入框里面的文件
var file = $("#userPictureFile").get(0).files[0];
//判断读取的文件是否是需要的文件类型
console.log(file.type);
if (regexImageFilter.test(file.type)) {
//使用文件读取器读取文件。并把文件转为URL(Base64编码)
imageReader.readAsDataURL(file);
} else {
alert(“选择的不是一个有效的图片文件”);
}
}
写好之后就可以在页面头像的空白处双击上传图片了。