使用FileReader对象的readAsDataURL方法回显图片

最新推荐文章于 2024-06-01 11:10:28 发布
最新推荐文章于 2024-06-01 11:10:28 发布
阅读量2.9k 收藏 3
点赞数 2
分类专栏： WEB前端 文章标签： 使用FileReader对象的readAsDataURL方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ThinkPet/article/details/80397590
版权 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>使用FileReader对象的readAsDataURL方法回显图片</title>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	</head>
	
<body>
	<script type="text/javascript">  
     function changImg(e){  
        for (var i = 0; i < e.target.files.length; i++) {  
            var file = e.target.files.item(i); 
            //正则表达式判断文件类型是否为图片
            while (!(/^image\/.*$/i.test(file.type))) {              	
                  
                alert('不是图片');
                break;//不是图片 就跳出这一次循环
            }  
            //实例化FileReader 
            var freader = new FileReader(); 
            //FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL
            //readAsDataURL方法会使用base-64进行编码
            //编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。
            freader.readAsDataURL(file);  
            freader.onload = function(e) { 
            	//更改img的src属性
                $("#myImg").attr("src",e.target.result);  
            }  
        }  
    }  
</script> 

<form action="">  
   <input type="file" name="files" accept="image/*" οnchange="changImg(event)" >
   <img alt="暂无图片" id="myImg"  height="200px",width="200px">  
</form> 
</body>  
 
</html>

ThinkPet
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js分分钟搞定图片回显问题
Jack 架构师之路
11-22 6155
引言   在项目中遇到了上传图片的需求，图片上传回显是一套的东西，所以我们需要回显功能，下面提供一种js的实现方式：   js代码如下：function changImg(e,name) { for (var i = 0; i < e.target.files.length; i++) { var file = e.target.files.item(i);
JavaScript通过filereader接口读取文件
10-19
主要为大家详细介绍了通过filereader接口读取文件，使用readAsDataURL方法预览图片的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
转载：使用FileReader对象的readAsDataURL方法来读取图像文件
dinaozao7247的博客
11-09 338
文章转载自：http://blog.okbase.net/jquery2000/archive/1296.html； FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。使用Data URL的好处是，您不需要额外再发出一个HTTP 请求到服务...
js中readAsDataURL的意思，可以用于浏览器预览图像文件或者转成base64字符串
最新发布
weixin_54048131的博客
06-01 215
JavaScript 中的FileReader对象（实现上传图片预览）
azagj28208的专栏
05-06 703
方法一：使用js的FileReader对象 1、FileReader对象简介 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } else { alert("Not supported...
使用FileReader对象的readAsDataURL方法来读取图像文件
热门推荐
火星男孩的分享空间
04-19 5万+
readAsDataURL方法会使用base-64进行编码，编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA......使用
使用FileReader构造函数的readAsDataURL方法实现图片快速预览以及图片批量引入
m0_51981718的博客
01-16 580
上传图片快速预览，无需等待接口响应；在项目中多张图片需要引入时，不想一个个 import XXX from 'xxx…'方式引入，可以选择批量引入。
js实现图片上传到服务器和回显
10-15
如果是，它会使用`FileReader`的`readAsDataURL`方法读取文件，并在读取完成后更新`file-box`的背景图像，从而实现回显。 ```javascript function imgPreview(fileDom, i) { if (window.FileReader) { var reader...
如何用input标签和jquery实现多图片的上传和回显功能
10-18
此时，我们需要遍历这些文件，并使用`FileReader`对象来预览图片。`FileReader`提供了`readAsDataURL()`方法，可以将文件内容转换为Data URL，然后将其赋值给`<img>`标签的`src`属性，从而在页面上显示图片。以下是...
JS图片上传,回显，排序特效
11-23
通过监听`change`事件，我们可以获取到选中的文件，并使用FileReader对象的`readAsDataURL`方法将文件读取为数据URL，这是一种可以直接在浏览器中显示图片的格式。然后，将这个URL插入到HTML的某个元素（如`<img>`...
mui图片压缩上传及回显（包含java后台）
06-29
然后，我们可以利用`FileReader`的`readAsDataURL`方法将图片文件转化为`base64`编码的字符串，接着使用`canvas`绘制图片并调整其大小以达到压缩效果。压缩比例可以根据实际需求设置，例如，可以设置为原图尺寸的...
使用FileReader读取文本对象实现图片本地预览
walaw11的博客
01-30 355
【代码】使用FileReader读取文本对象实现图片本地预览。
前端--文件上传--文件切片--利用FileReader()中的readAsDataURL()做缩略图--多文件上传--formData--切片上传实现
墨苒孤的博客
04-12 2661
前端最常见的就是添加一个multiple 属性，这样在上传的时候只要按住Ctrl 就可以选择多个文件了，这样的方式对用户不够友好，因为有些用户是不知道按住Ctrl 可以选择多个文件的，一般来说，用户只会一个文件，一个文件来上传的。图片可以通过转成Base64 的方式，文件一般使用 formData来进行传输，可以说，formData 就是一个载体，负责装载文件。//用户一个一个选择文件，直接push存储起来，符合用户习惯。//结合 multiple属性，可以上传多个文件，"文件大小不能超过10M"
js readAsDataUrl方法实现多图预览
xioxi
08-28 683
<input type="file" name="cli[ ]" multiple lay-verify="files" class="layui-input" onchange="inputChanges()" id="fileimgs"> function inputChanges(){ var files = document.getElementById('fileimgs').files; if(files.length == 0) return;
【JS】前端文件读取FileReader操作总结
yqdid的博客
04-26 4970
开发中经常遇到文件上传的场景，有时需要前端将文件内容读取出来再以base64格式传到接口
FileReader 方法 实现预览图片
weixin_30898109的博客
10-03 169
FileReader 方法 方法名参数描述 abort none 中断读取 readAsBinaryString file（blob） 将文件读取为二进制码 readAsDataURL file（blob） 将文件读取为 DataURL readAsText file, （blob） 将文件读取为文本 Fil...
URL.createObjectURL() 和 FileReader.readAsDataURL() 的区别，大文件下载浏览器崩溃的处理方案
前端笔记——放弃很容易,但坚持一定很酷
08-09 1669
背景：大文件下载（2G以上）。研发和测试环境都没有问题，到现场大文件下载浏览器内存崩溃了。一开始使用下载大文件会导致浏览器崩溃，使用之后问题解决。
表单上传多个图片可回显图片
06-06
当你使用表单上传多个图片时，可以通过以下方式回显图片： 1. 在前端将上传的图片以 base64 编码的形式保存起来，然后通过 `img` 标签的 `src` 属性将其显示出来。 ```html <template> <div> <input type="file" ref="fileInput" multiple @change="handleFileUpload"> <button @click="submitForm">提交表单</button> <div v-for="(file, index) in files" :key="index"> <img :src="file.url" alt="上传的图片"> </div> </div> </template> <script> export default { data() { return { files: [], // 存放上传的文件 } }, methods: { handleFileUpload() { this.files = Array.from(this.$refs.fileInput.files) this.files.forEach(file => { this.getBase64(file) .then(url => { // 将 base64 编码的图片保存起来 file.url = url }) }) }, submitForm() { const formData = new FormData() this.files.forEach(file => { formData.append('images', file) }) // 将 formData 发送到后端处理 // ... }, getBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => resolve(reader.result) reader.onerror = error => reject(error) }) }, }, } </script> ``` 2. 在后端处理完上传的图片后，将图片的 URL 发送给前端，然后在前端将其显示出来。 ```html <template> <div> <input type="file" ref="fileInput" multiple @change="handleFileUpload"> <button @click="submitForm">提交表单</button> <div v-for="(file, index) in files" :key="index"> <img :src="file.url" alt="上传的图片"> </div> </div> </template> <script> export default { data() { return { files: [], // 存放上传的文件 } }, methods: { handleFileUpload() { this.files = Array.from(this.$refs.fileInput.files) }, submitForm() { const formData = new FormData() this.files.forEach(file => { formData.append('images', file) }) axios.post('/upload', formData) .then(response => { // 后端返回的图片 URL 数组 const urls = response.data.urls urls.forEach((url, index) => { // 将图片的 URL 保存到对应的文件对象中 this.files[index].url = url }) }) }, }, } </script> ``` 以上是两种常见的回显图片的方式，你可以根据自己的需求进行相应的修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ThinkPet

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值