使用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实现图片上传到服务器和回显
10-15
如果是，它会使用`FileReader`的`readAsDataURL`方法读取文件，并在读取完成后更新`file-box`的背景图像，从而实现回显。 ```javascript function imgPreview(fileDom, i) { if (window.FileReader) { var reader...
使用FileReader对象的readAsDataURL方法来读取图像文件
热门推荐
火星男孩的分享空间
04-19 4万+
readAsDataURL方法会使用base-64进行编码，编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA......使用
JavaScript 中的FileReader对象（实现上传图片预览）
azagj28208的专栏
05-06 700
方法一：使用js的FileReader对象 1、FileReader对象简介 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } else { alert("Not supported...
js中readAsDataURL的意思，可以用于浏览器预览图像文件或者转成base64字符串
最新发布
weixin_54048131的博客
06-01 164
前端--文件上传--文件切片--利用FileReader()中的readAsDataURL()做缩略图--多文件上传--formData--切片上传实现
墨苒孤的博客
04-12 2554
前端最常见的就是添加一个multiple 属性，这样在上传的时候只要按住Ctrl 就可以选择多个文件了，这样的方式对用户不够友好，因为有些用户是不知道按住Ctrl 可以选择多个文件的，一般来说，用户只会一个文件，一个文件来上传的。图片可以通过转成Base64 的方式，文件一般使用 formData来进行传输，可以说，formData 就是一个载体，负责装载文件。//用户一个一个选择文件，直接push存储起来，符合用户习惯。//结合 multiple属性，可以上传多个文件，"文件大小不能超过10M"
使用FileReader读取文本对象实现图片本地预览
walaw11的博客
01-30 336
【代码】使用FileReader读取文本对象实现图片本地预览。
JS图片上传,回显，排序特效
11-23
通过监听`change`事件，我们可以获取到选中的文件，并使用FileReader对象的`readAsDataURL`方法将文件读取为数据URL，这是一种可以直接在浏览器中显示图片的格式。然后，将这个URL插入到HTML的某个元素（如`<img>`...
mui图片压缩上传及回显（包含java后台）
06-29
然后，我们可以利用`FileReader`的`readAsDataURL`方法将图片文件转化为`base64`编码的字符串，接着使用`canvas`绘制图片并调整其大小以达到压缩效果。压缩比例可以根据实际需求设置，例如，可以设置为原图尺寸的...
如何用input标签和jquery实现多图片的上传和回显功能
10-18
此时，我们需要遍历这些文件，并使用`FileReader`对象来预览图片。`FileReader`提供了`readAsDataURL()`方法，可以将文件内容转换为Data URL，然后将其赋值给`<img>`标签的`src`属性，从而在页面上显示图片。以下是...
本地图片上传回显
08-22
`readAsDataURL()`方法可以将图片文件转换为Base64编码的URL，这个URL可以直接插入到`<img>`标签的`src`属性中，从而实现在页面上显示图片。 6. 图片格式：常见的图片格式有JPEG、PNG、GIF等，不同的格式可能会影响...
weui框架实现上传、预览和删除图片功能代码
10-19
此外，我们还需要一个用于选择和上传图片的区域，可以使用WeUI的`weui-uploader`组件： ```html 图片上传 <div class="weui-uploader__info">0/2 <!-- 已上传图片列表 --> *" multiple /> ...
SpringMVC多个文件上传及上传后立即显示图片功能
08-29
在上面的代码中，我们使用 `FileReader` 对象来读取文件，并使用 `DataURL` 来预览图片。然后，我们可以使用 `img` 元素来显示图片。 三、结论 在本节中，我们讨论了如何使用 SpringMVC 实现多个文件上传并在上传...
图片上传功能，前端demo
11-01
在图片上传功能中，FileReader的`readAsDataURL`方法被用来读取图片文件，并将其转化为可以在浏览器中显示的数据URL。然后，这个数据URL可以赋值给`<img>`标签的`src`属性，从而实现图片的预览。 4. **事件监听与...
html5移动端图片上传本地生成缩略图预览（单图上传）
11-19
通过FileReader的readAsDataURL方法，可以读取文件内容为data URL，这是一个可以直接在浏览器中显示的Base64编码的字符串。 二、图片预览 1. 创建`<input type="file">`元素，用于让用户选择图片。 ```html ``` 2...
自己写的一个图片上传功能
08-11
`FileReader.readAsDataURL()`方法可以将文件转换为Base64编码的字符串，这个字符串可以直接用作`<img>`标签的`src`属性值。 4. **文件上传**： 图片上传通常采用Ajax异步方式，使用XMLHttpRequest或Fetch API发送...
URL.createObjectURL() 和 FileReader.readAsDataURL() 的区别，大文件下载浏览器崩溃的处理方案
前端笔记——放弃很容易,但坚持一定很酷
08-09 1593
背景：大文件下载（2G以上）。研发和测试环境都没有问题，到现场大文件下载浏览器内存崩溃了。一开始使用下载大文件会导致浏览器崩溃，使用之后问题解决。
使用FileReader构造函数的readAsDataURL方法实现图片快速预览以及图片批量引入
m0_51981718的博客
01-16 561
上传图片快速预览，无需等待接口响应；在项目中多张图片需要引入时，不想一个个 import XXX from 'xxx…'方式引入，可以选择批量引入。
FileReader 中的readAsDataURL 选择图片文件后即使预览图片
qq_42705221的博客
11-05 2万+
1：FileReader : 读取文件内容             readAsText() 读取文本文件，(可以使用Txt打开的文件)             readAsBinaryString(): 读取任意类型的文件，返回二进制字符串             readAsDataURL: 方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件 ...
readAsDataURL
09-11
`readAsDataURL` 是 JavaScript File API 中的一个方法，可用于将文件读取为数据 URL。它可以用于在浏览器中预览图像文件或将文件转换为 base64 编码的字符串。 使用 `readAsDataURL` 方法需要创建一个 `FileReader` 对象，并将要读取的文件传递给它。然后，通过监听 `FileReader` 对象的 `onload` 事件，在事件处理函数中可以获取到读取的数据 URL。 以下是一个简单的示例代码： ```javascript function handleFileSelect(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.onload = function(e) { var dataURL = reader.result; console.log(dataURL); // 在这里可以对数据 URL 进行进一步处理 }; reader.readAsDataURL(file); } var fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', handleFileSelect, false); ``` 在上面的示例中，我们创建了一个文件输入元素（id 为 "fileInput"），当用户选择文件后，会触发 `change` 事件，然后调用 `handleFileSelect` 函数来处理选中的文件。在 `handleFileSelect` 函数中，我们创建了一个 `FileReader` 对象并将文件传递给它，然后监听 `onload` 事件，在事件处理函数中获取到读取的数据 URL。 请注意，由于安全性限制，浏览器可能会阻止在没有用户交互的情况下自动触发文件选择操作（例如使用 JavaScript）。因此，通常需要通过用户手动选择文件来触发 `handleFileSelect` 函数。 希望这可以回答您的问题！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

ThinkPet

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

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

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

打赏作者

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

抵扣说明：

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

余额充值