JS FileReader 图片的本地预览

最新推荐文章于 2024-07-24 11:31:03 发布
最新推荐文章于 2024-07-24 11:31:03 发布
阅读量620 收藏 1
点赞数
分类专栏： php js 文章标签： FileReader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ougexingfuba/article/details/74930920
版权
php 同时被 2 个专栏收录
20 篇文章 1 订阅
订阅专栏
js
17 篇文章 0 订阅
订阅专栏 
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader(), rFilter = /^(?: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;

oFReader.onload = function (oFREvent) {
  document.getElementById("uploadPreview").src = oFREvent.target.result;
};

function loadImageFile() {
  if (document.getElementById("uploadImage").files.length === 0) { return; }
  var oFile = document.getElementById("uploadImage").files[0];
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
  oFReader.readAsDataURL(oFile);
}
</script>
</head>

<body οnlοad="loadImageFile();">
  <form name="uploadForm">
    <table>
      <tbody>
        <tr>
          <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td>
          <td><input id="uploadImage" type="file" name="myPhoto" οnchange="loadImageFile();" /></td>
        </tr>
      </tbody>
    </table>

    <p><input type="submit" value="Send" /></p>
  </form>
</body>
</html>

ougexingfuba
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS-FileReader,读取input:file中的图片(Vue)
看开了
07-14 1334
功能:用户上传头像 <label> <input @change="imgChoose" class="none" type="file" accept="image/*"> <img :src="imgSrc" alt="选择头像"> </label> ...
JS读取图片文件
翻车鱼的博客
10-28 8905
JS读取图片文件 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> if(typeof FileReader == ...
Js FileReader图片加载
weixin_30411239的博客
10-24 122
FileReader FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。 方法 方法定义描述 abort():void 终止文件读取操作 readAsArrayBuffer(file):void 异步按字节读取文件内容，结果用Ar...
JavaScript中 FileReader 对象详解
最新发布
每天都要努力学习哦~~
07-24 1891
FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。其中 File 对象可以是来自用户在一个 < input > 元素上选择文件后返回的 FileList 对象，也可以来自拖放操作生成的 DataTransfer 对象，还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile() 方法后返回结果。
JavaScript通过 new FileReader() 获取图片base64 无组件上传图片
达拉崩巴斑得贝迪卜多比鲁翁_
10-27 1644
我们知道，img的src属性或background的url属性，可以通过被赋值为图片网络地址或base64的方式显示图片。 在文件上传中，我们一般会先将本地文件上传到服务器，上传成功后，由后台返回图片的网络地址再在前端显示。 通过FileReader的readAsDataURL方法，我们可以不经过后台，直接将本地图片显示在页面上。这样做可以减少前后端频繁的交互过程，减少服务器端无用的图片资源，代码如下： iview官网查看 data(){ return{ iconFileSrc: null, //
JavaScript 中的FileReader对象（实现上传图片预览）
zdd183的博客
06-24 389
JavaScript 中的FileReader对象（实现上传图片预览） 方法一：使用js的FileReader对象 1、FileReader对象简介 1.1 检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } else { a...
原生js FileReader对象实现图片上传本地预览效果
10-19
今天我们将探讨使用原生JavaScript中的FileReader对象来实现图片上传和本地预览效果的技术。 首先，FileReader是一个用于读取本地文件系统的接口，它允许Web应用异步读取存储在用户计算机上的文件（比如图片、文本...
JavaScript使用FileReader实现图片上传预览效果
10-19
总的来说，使用JavaScript和FileReader API实现图片上传预览是一个实用且常见的功能，它使得用户在上传文件之前就能看到即将上传的图片，提高了网站或应用的用户体验。通过掌握这一技术，开发者可以创建更加动态和...
JS中利用FileReader实现上传图片前本地预览功能
10-18
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容,使用 File 或 Blob 对象指定...下面通过本文给大家介绍JS中利用FileReader实现上传图片前本地预览功能，需要的朋友参考下
116JS-文件读取显示预览图片FileReader=121
Gy_9543的博客
07-31 158
文件读取 FileReader var reader = new FileReader(); //异步方法 reader.readAsDataURL('文件'); reader.onload = function () { console.log(reader.result); } 实例 // 选择文件上传控件 var file = document.querySelector('#file'); var preview =document.querySelector('
JavaScript通过filereader接口读取文件
10-19
主要为大家详细介绍了通过filereader接口读取文件，使用readAsDataURL方法预览图片的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript中利用FileReader实现上传图片前本地预览
青衫无忧的博客
12-14 838
该方法将文件读取为一段以 data: 开头的字符串，这段字符串就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案，这里的小文件通常是指图像与 html 等格式的文件。将文件以文本方式读取，读取的结果即是这个文本文件中的内容。FileReader 的拥有 4 个方法，其中 有3 个用来读取文件，另1个用来中断读取。该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。3、onload 文件读取成功完成时触发。1、onabort 中断时触发。
JavaScript使用H5 FileReader和Image对象获取本地图片的分辨率
u012443286的博客
05-15 6262
业务场景 试想这样的应用场景： 当我们上传本地图片时，需要校验图片的分辨率，只有水平分辨率不大于1920、垂直分辨率不大于1080的图片才允许上传。 后端处理方案 显然，我们是可以将分辨率校验交给后端的，这样的问题在于，后端校验需要前端先发起ajax请求，并且后端校验也需要一定的处理时间，就整体体验而言，用户等待时间较长，不利于用户体验。 因此还是推荐前端校验，直接给出结果。 难点所在 对于type='file'的input框，在其change事件中，我们可以直接拿到file对象，包含了name、siz
Js FileReader图片加载，预处理本地缓存图片
qq_43305958的博客
08-31 874
Js FileReader图片加载一、FileReader是什么？二、使用步骤总结 FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。 一、FileReader是什么？ FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。 二、使用步骤 //获取文件名字的后缀名 const prefix = img.name.split('.')[1] if (prefix !== 'jpg' && prefix !
使用FileReader对象的readAsDataURL方法来读取图像文件
热门推荐
火星男孩的分享空间
04-19 5万+
readAsDataURL方法会使用base-64进行编码，编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA......使用
一分钟学会使用js读取上传图片文件
object not found的博客
09-05 1万+
显示一个图片，除了直接放文件路径，还可以放Base64当我们用file选择一个文件时，我们希望能够读取到文件路径，然后显示到一个img上或许你会想利用value值显示，input:file上确实有value但是这个value不能用fileReader，尽量先监听，然后再读取，好了不废话了直接看代码吧。
JavaScript中读取和保存文件实例
bingcool
12-01 1470
话说今天只是粗略浏览了一下Proxy SwitchySharp的源码，就收获了不少东西，其中就包括本文要介绍的读取和保存文件。 因为Google还不提供同步插件数据的功能，所以导入和导出插件配置就必须和文件打交道了。而出于安全原因，只有IE才提供访问文件的API；但随着HTML 5的到来，其他浏览器也纷纷支持了。 首先说读取文件。W3C提供了一些File API，其中最重要的是FileRe
FileReader()读取文件、图片上传预览
油墨香^-^的博客
02-16 2379
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个htmlCanvasElement上执行mozGetAsFile()方法后返回结果。
js 图片类型mage/jpeg， image/bmp， image/gif ，image/png
橙-极纪元-cplvfx-JJY.Cheng
06-08 1万+
js 图片类型mage/jpeg， image/bmp， image/gif ，image/png
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

ougexingfuba

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

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

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

打赏作者

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

抵扣说明：

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

余额充值