- 下面的是HTML上的代码
<div class="col-12 col-lg-3 text-center">
<img src="" alt="" width="150" height="180" id="WGPicture" class="border border-primary" ondblclick="chooseImageFile('fileWGSmallImage');" />
<input type="file" name="fileWGPicture" id="fileWGSmallImage" hidden accept="image/*" onchange="showImgToView('fileWGSmallImage');" />
<p>双击选择图片</p>
</div>
- 具体的模样在页面上呈现的是
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190531213128934.png)
- 接下来的就是HTML中的双击时间和改变事件
通过文件获取的接口来获取选择的图片并显示出来
FileReader接口提供了一个异步的API,通过这个API可以从浏览器中异步访问文件系统中的数据。因此,FileReader接口可以读取文件中的数据,并将读取的数据放入到内存中去
选择照片:用FileReader对象来读取本地数据,并且将数据结果赋值给image的src
打开file表单,选择图片