图片的上传

开发工具与关键技术：VS Upload
作者：微凉之夏
撰写日期：2019年07月06日

在上传模块中它所包含的不仅是更为强劲的功能，还有灵活的UI，任何元素都可以作为上传组件来调用，比如按钮、图片、普通的DIV等等，而不再是一个单调的file文件域了。
一切从小试牛刀开始吧，通常情况下，我们上传文件是借助type = “file”的input标签来完成色，但是非常遗憾的是，它不能很好地与其它表单元素并存在一起，所以我们常常需要单独为它做一个业务层面的（异步上传），即先让图片上传，再和其它的表单一起提交并保存，下面是一个小小的示例：

首先是它的布局它的类是.collapse是折叠面板当你点击它是它就会触发把所隐藏内容显示出来（.collapse(‘show’) 显示可折叠元素，在可折叠元素实际显示之前（即show.bs.collapse 事件发生之前返回给调用者）、.collapse(‘hide’) 隐藏可折叠元素，在可折叠元素实际上被隐藏之前（即hidden.bs.collapse事件发生之前返回给调用者）），我们要实现它那得要CheckBox的改变事件来触发，当下面第二张的勾选中了就会出现第二张图的样式，如下：

当我们双击上图的图片它就会弹出一个文件选择器（意思就是触发了文件选择器的点击事件），那么我们得先写图片的双击事件：
//打开图片文件选择对话框
$("#NoticeCarousePicture").dblclick(function () {
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲NoticeCarouseIm…("#NoticeCarouseImage")的文件选择器的改变事件图片的正则表达式读取文件载入事件等等如下：

上图的if语句中的意思是通过它的这个规则去匹配它的类型，如果满足这个规则那么继续，不满足就提示一下（主要是用来验证它是不是图片类型），imgReader.readAsDataURL(imgfFile); 这句是调用文件阅读器把它转换成URL类型，（当我们双击图片是它就会弹出一个文件选择器，而这时候文件选择器弹出一个框让你打开一个文件，然后当你选中并打开它时它就会触发文件选择器的改变事件）结果如下：

虽然代码就这几句但是其中也挺复杂的，这样子图片上传就完成啦。