＜input type=“file“＞标签，实现上传图片预览功能

已于 2022-11-20 16:31:15 修改
阅读量1.2k 收藏 3
点赞数 2
文章标签： 前端 javascript 开发语言
于 2022-11-20 16:29:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51304722/article/details/127950246
版权
本文介绍了如何利用HTML和JavaScript实现图片上传时的预览功能。通过FileReader的readAsDataURL方法，可以在不上传到服务器的情况下显示图片内容。
摘要由CSDN通过智能技术生成
效果图：

图片预览

起因：

最近在做图片上传功能时，发现只能得到图片的文件名，而无法知道这张图片到底长啥样？因此希望做一个图片预览功能，然后就一直去寻宝藏，功夫不负有心人，我寻到了，宝藏地址我放下面了。废话不多说，直接上代码：

HTML：
<input type="file" onchange="previewFile()" /><br />
<img src=
最低0.47元/天 解锁文章
一个找不到计算机相关的工作的菜鸟
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
input file上传图片预览
12-30
input file上传图片预览
js 的简单的图片预览效果
qq_28742763的博客
05-25 463
git stash: 备份当前的工作区的内容，从最近的一次提交中读取相关内容，让工作区保证和上次提交的内容一致。同时，将当前的工作区内容保存到Git栈中。 git stash pop: 从Git栈中读取最近一次保存的内容，恢复工作区的相关内容。由于可能存在多个Stash的内容，所以用栈来管理，pop会从最近的一个stash中读取内容并恢复。 git stash list: 显示Git栈内的所有备
el-image展示预览base64格式的图片和img标签展示base64格式的图片
starstarstarl的博客
07-12 366
el-image展示base64格式的图片。img标签展示base64格式的图片。
input上传图片并预览
热门推荐
PresByter的博客
10-23 9万+
首先说一下input 大家都知道上传文件，图片是通过input 的file进行上传的。 1. 首先是样式 大家都知道input在HTML的代码为 <input type="file">；在页面的样式是不可以更改的，如下图 但是最为一个投机取巧的前端，一切样式都是可以修改的。 效果图如下 代码： <input type="file" n
上传图片获取base64位编码
weixin_30460489的博客
11-09 349
function loadImg(){ //获取文件 var file = $("#imgForm").find("input")[0].files[0]; //创建读取文件的对象 var reader = new FileReader(); //创建文件读取相关的变量 var imgFile;...
input type=file 选择图片并且实现预览效果的实例
08-29
我们使用了jQuery库来获取input file元素，并在其change事件中读取文件数组的第一个元素，然后使用FileReader对象来读取文件，并将读取结果赋值给img元素的src属性，以实现图片预览的功能。 本文介绍了一个使用...
jQuery实现input[type=file]多图预览上传删除等功能
12-29
下图是功能实现的预览效果，虽然样式有点丑，不过功能还是实现了。话不多说，直接看代码会更直观一些。 首先定义一下基本格式，样式代码自行脑补： <body> <div class=upload-header> <input id=upload...
HTML input type=file文件选择表单元素.docx
11-22
HTML5 中的 input type=file 元素支持多图上传、上传前预览、二进制上传等功能，取代了 swfupload.js 的作用。现在，很流行的一种处理方式，就是 HTML5 文件上传和 flash swfupload 上传一起整合的模式，优先使用...
input type=file 及时预览图片
01-06
最后，提供的`cho.html`文件可能是一个示例网页，它包含了上述的HTML和JavaScript代码，用于演示`<input type="file">`实现图片预览的功能。通过学习和理解这个例子，开发者可以轻松地在自己的项目中实现类似的功能...
input file上传 图片预览功能实例代码
09-01
以上就是关于`<input type="file">` 上传图片预览功能的实现原理和实例代码解析。这个功能不仅简化了用户的操作流程，也提高了网页的交互性。在实际开发中，还可以根据需要添加更多细节，如错误处理、图片大小限制...
通过input[type=“file“]上传文件或图片——功能实现
yehaocheng520的博客
06-29 8837
在后台管理系统中，经常会用到图片或者文件的上传。 如果用到的是VUE框架的话，可以通过对应UI框架中的上传组件： 比如：elementUi中的upload上传 还有一种方式就是直接使用input组件，此组件当type="file"时，就是一个上传文件或者图片的控件了。 具体使用方法如下： 1.触发选择文件的html部分 整个页面都是用的elementUi的框架，因此部分组件是用的elementUI中的组件形式，例如下面的按钮组件 <el-button size="mini" type="succes
input上传图片，并预览
weixin_51293134的博客
09-14 409
【代码】input上传图片，并预览。
input file图片预览
sgb1996的博客
11-26 574
input file图片预览
input file上传图片
世界太浮夸
02-23 1768
jquery： //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $file[0]; var windowURL = window.URL || window.webkitURL; var dataURL; var
input上传图片并且实现预览
weixin_45757134的博客
06-11 6600
文章目录前言一、确定思路二、书写代码1.HTML部分2.CSS部分3.JS部分（重点）3.1.点击选择图片按钮，调用input文件框事件的的代码3.2.转换格式3.3.发送图片给后端 前言 在网站中，上传图片这个功能，这个还是挺常见的。比如说：在填写信息中，上传头像中。 提示：以下是本篇文章正文内容，下面案例可供参考 一、确定思路 整个功能，大致可以分为三个步骤。 点击选择图片的按钮，从本地选择一张图片。（选图片） 选择好之后，会进行预览。就好比自己微信要换头像，选择好之后，都会有预览的步骤。（预
使用input标签上传图片
最新发布
好好学习，好好生活
07-25 126
加了 const fileKey = ref(0)我发现如果上传一张a图片，清空previewImage.value = ''，当我再次上传a图片有问题。事件，这通常是因为浏览器对文件选择进行了优化。浏览器可能认为既然用户选择了相同的文件，就没有必要重新触发。标签上传文件时，如果前后两次上传同一个文件，但浏览器没有触发。事件，因为从用户的角度来看，没有发生任何变化！这里上传完成，清空回显图片，可以让用户再次上传。所以更改 key 以强制重新渲染 input！
input 上传文件或者图片
liujiajiajing的博客
04-19 574
【代码】input 上传文件或者图片。
<input type="file" onchange="previewImage(this)">需要添加到哪里
07-12
你可以将 `<input type="file" onchange="previewImage(this)">` 添加到你希望用户能够选择图片的地方。 例如，如果你希望在一个表单中添加一个图片上传功能，你可以将这行代码放置在表单中的适当位置。下面是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值