如何实现上传图片并显示图片？

平时在注册或者填写完整个人信息的时候都会遇见上传个人图片的情况，那么你有没有想过这个该如何实现的呢？在以前还没有学到这个知识之前，就觉得好神奇，在网上居然能做到上传图片的效果，而现在自己学到了就觉得就几个步骤而已，所以学到了就觉得蛮简单，并没有我们想象中的那么困难。
如何实现的呢？
以上传员工图片为例：首先要设置一个img标签和一个input标签，而这两个标签是有相连的地方的，img标签是用来设置图片的大小，而input标签隐藏起来，当双击img标签的时候，input标签也执行起来，弹出文件框，选择要上传的图片。

@* ondblclick 为双击事件，onchange是当元素发生改变时触发 *@
<img width="250" height="280" src="" alt="" id="IsImgEmployeePicture" style= "border:1px solid #999;" ondblclick="chooseImageFile('EmployeePicture')"/>
<input type="file" name="fileEmployeeImage" id="EmployeePicture" hidden accept="image/*" onchange="showImgToView('EmployeePicture')"/>

上面的两句代码之间是通过EmployeePicture进行相连的，这样之间就可以关联起来，实现上传图片的方法不只是靠这两句代码就可以了，还有要写点击的方法。
步骤： 1、先打开file文件表单选择图片；2、创建FileReader对象，用正则表达式过滤图片文件；3、利用改变事件将图片显示出来；4、读取文件，将url绑定到img标签的src属性上。
详细： 1、chooseImageFile方法：

2、创建FileReader对象：

正则表达式过滤图片文件：

regexImageFile=/^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

补：FileReader对象允许Web应用程序来异步读取存储在用户计算机上的文件里面的内容，使用File或者Blob对象指定要读取的文件或数据，其中结合input：file可以很方便的读取本地文件里面的内容。

3、利用改变事件将图片显示出来：

readAsDataURL()方法是FileReader对象里面的方法，其作用为可以获取API异步读取的文件数据，将图片另存为数据Url,还可以实现图片上传预览的效果，让用户确认是否就是上传这张图片，提升用户体验。
4、读取文件

实现上传图片就这四个步骤，其实就是在FileReader这里是关键的节点，因为FileReader有读取文件的作用，你也可以尝试去上传一下自己的图片。
源码
注意：在这里需要引用一个jQuery插件才能使用


@{Layout = null;
}<!DOCTYPE html><html>
<head><meta name="viewport" content="width=device-width" /><title>上传图片</title>
</head>
<body><div> @* ondblclick 为双击事件，onchange是当元素发生改变时触发 *@<img src="" alt="" id="IsImgEmployeePicture" style="border:1px solid #999;display: block;width: 300px;height: 300px;" onclick="chooseImageFile('EmployeePicture')" /><input type="file" name="fileEmployeeImage" id="EmployeePicture" hidden accept="image/*" onchange="showImgToView('EmployeePicture')" /></div><script src="~/Scripts/jquery-3.4.1.min.js"></script><script>//1、单击调用chooseImageFile方法function chooseImageFile(inputFileID) {$("#" + inputFileID).click();   //模拟点击EmployeePicture（input）,出发showImgToView()方法}//2、创建FileReader对象var fileReader = new FileReader();//正在判断是否符合图片类型regexImageFile = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;//3、利用改变事件将图片显示出来function showImgToView(inputFileId) {//选择图片文件var imgFile = $("#" + inputFileId).get(0).files[0];//判断上传文件是否为图片格式if (!regexImageFile.test(imgFile.type)) {return;} else {//将文件读取为DataURLfileReader.readAsDataURL(imgFile);}}//4、读取文件fileReader.onload = function (evt) {//将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果$("#IsImgEmployeePicture").attr("src", evt.target.result);}</script>
</body>
</html>

如何实现上传图片并显示图片？相关推荐

上传图片即时显示图片
方法一: 使用URL.createObjectURL()方法: var imgPath = document.getElementById("imgPath");//上传图片的id ...
vue实现上传图片和显示图片
上传图片并显示点击上传文件的input的时候,将图片上传到页面上,并且显示已经上传的图片,同时也可以保存到后台 // 因为input的上传按钮,会显示的比较突兀,所以在点击div的时候判断是否存在了 ...
上传图片直接显示图片操作
直接看代码:本文显示图片一部分是代码是引用的一位大佬的具体的链接给忘记了抱歉 <tr><td>详细地址:</td><td colspan="3&qu ...
javaweb网页上传图片并显示在页面上，并在服务端存到磁盘（base64编码解码）
最近做一个web项目用到上传图片,于是根据个人的知识及网上的搜集,将其总结于下: 上传图片时显示图片在页面 <input id="fileload" type=&quo ...
Java接受blob类型图片_原生JS上传图片接收服务器端图片并且显示图片（主要描述blob类型）...
1.了解后端处理图像的方式一:图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中二:将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使 ...
原生JS上传图片接收服务器端图片并且显示图片（主要描述blob类型）
1.了解后端处理图像的方式一:图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中二:将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使 ...
elementui el-from 怎样显示图片_vue2.0使用weui.js的uploader组件上传图片(兼容移动端)...
本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 最近在使用 vue2.0开 ...
Vue上传图片图片，img标签显示图片
前言有很多时候,会有图片上传的需求,用户选择上传图片后,要求在界面进行显示,当点击保存,或者确定按钮的时候上传到服务器. 话不多说直接上代码 <div class="upload-c ...
关于kindeditor编辑器批量上传图片不显示添加图片按钮的问题
今天在项目里发现kindeditor编辑器批量上传图片不显示添加文件按钮,去官网看demo是有的,经过浏览器debug发现是由于 multiimage.js文件的一个时间参数传递的不对, 很奇怪,改为 ...

如何实现上传图片并显示图片？

如何实现上传图片并显示图片？

如何实现上传图片并显示图片？相关推荐

最新文章

热门文章