页面获取图片并显示

￡神魔★判官ぃ 2022-10-03 00:41 171阅读 0赞

页面获取图片并显示

开发工具与关键技术： Visual Studio 2015 – Jquery  
作者：廖亚星  
撰写时间：2019年 6 月 22 日

在做项目的时候，商品信息里面会显示图片的样子供人了解这个商品，获取这个商品简单，但要想使这个图片显示出来就不一定了，下面我们就来说说让照片如何获取并在页面上显示出来  
首先我们在页面上放置一个img标签，给它一个边框，方便在页面上显示图片的位置  
<img src="" alt="" id=“Picture” class=“d-block"style=“width:125px;height:135px;border:1px solid \#ff0000;” />  
页面效果：  
![在这里插入图片描述][20190622153232870.PNG]  
然后在下面放置一个input标签，type类型为file，这是用来获取文件路径的  
<input type=“file” id=“fileImage” name=“file” multiple=“multiple” accept=”image/png,image/jpg,image/bmp,  
image/gif,image/jpeg” hidden />  
然后在下面给img标签一个双击事件，使双击img时调用文件按钮的点击事件  
//选择头像 头像图片双击事件  
$("\#Picture").dblclick(function () \{  
KaTeX parse error: Expected 'EOF', got '\#' at position 3: ("\#̲fileImage").cli…/i;  
然后写图片的change事件  
//读取图片数据 显示在页面上  
$("\#fileImage").change(function () \{  
var file = KaTeX parse error: Expected 'EOF', got '\#' at position 3: ("\#̲fileImage").get…("\#fileImage").get(0).files\[0\]);  
if (!rFilter.test(file.type)) \{//判断文件是否是图片类型  
layer.alert(“选择的不是一个有效的图片文件”);  
\} else \{  
reader.readAsDataURL(file);  
//readAsDataURL是 FileReader接口的方法 将文件读取为DataURL  
\}  
\});  
最后处理load事件  
//处理load事件。该事件在读取操作完成时触发  
reader.onload = function (evt) \{  
console.log(evt);  
//onload 为FileReader接口的一个事件 成功读取  
$("\#Picture").attr(“src”, evt.target.result);  
\};  
这样就完成了，当你双击图片时，会弹出选取图片，然后选取图片后即可在页面上显示了  
![在这里插入图片描述][20190622153239647.PNG]

[20190622153232870.PNG]: /images/20220109/a4a53f42b9794cd09dfdcf492ef32dc8.png
[20190622153239647.PNG]: /images/20220109/d96b6e0ac6764d2fb28e7d5e0bf63e5f.png