文件选择器的使用

（作者：杨先金；撰写时间：2019年4月20日）
1、页面部分的代码如下，首先，我们需要准备两个标签，一个img标签，还有一个input标签。
img标签给它一个id为NoticeCarousePicture，并且给它的src属性设置图片路径，这里是一张“上传图片”的小图标；input标签的类型为“file”，也就是文件类型的input标签，用来打开文件选择器的，我们把它hidden隐藏起来， 除此之外我们还可以给它设置一个

accept="image/jpeg,image/png,image/jpg,image/gif,image/bmp"这样的属性，主要是用来提供可选择的自定义文件类型，它的效果就是在文件选择器的文件选择栏哪里多出了一列“自定义文件”的列，这一句可写可不写，不写，它默认的是“所有文件”。

2、接下来是js部分的代码，首先，在大脑中要有这样的思维，当你双击图片的时候，实际上是点击了input标签，file类型的input标签就会自动去打开文件选择器，而当你选择了某个文件的时候，便触发了input标签的改变事件，从而把你选择的文件显示到页面。
这个过程并不复杂，几句简单的代码就能实现。

重点理解一下它的改变事件，在它的方法体内，首先定义一个变量“files”接收你选择到的文件，然后对它进行一系列判断。如果files的长度大于零，也就是选择了文件，那么进行下一步判断，否则提示用户“请选择图片”。经过第一层判断，来的第二层判断，第二层判断要通过事先定义好的正则表达式匹配到选择的文件所属的类型，如果它的文件类型为预期的图片类型，那么使用文件读取器读取文件，并把读取的结果返回给img的图片路径，把“上传图片”的小图标替换成你选择的文件图片，否则提示用户“只能选择图片”。

3、最终的效果图为：