WebAPI接口FileReader实现预览图片

比眉伴天荒 2023-07-11 12:48 14阅读 0赞

【传送门】[https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader][https_developer.mozilla.org_zh-CN_docs_Web_API_FileReader]

## 介绍 ##

FileReader仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。 要在JavaScript中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取，如果读取跨域，则使用CORS权限。

## 代码 ##

<script type="text/javascript">
      var reader,file;
    
      $("#image_icon").change(function(){
    
        if(typeof FileReader=='undifined') 
        {
            alert("暂不支持filereader");
            return false;
        }
          reader = new FileReader();
           
          file = $(this)[0].files[0];
    
          if(!/image\/\w+/.test(file.type))
          {
              alert("请确保文件为图像文件");
              return false;
          }
    
          reader.readAsDataURL(file);
    
          reader.onload=function(e)
          {
              $("#image_icon_1").attr("src",this.result);
          }
      })
    </script>

[https_developer.mozilla.org_zh-CN_docs_Web_API_FileReader]: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关上传图片实现预览

![Image 1][]浏览器必须支持FileReader,先判断是否支持。监听type属性等于file的input的change（值改变）事件。使用F

Bertha 。/ 2023年10月16日 22:41/ 0 赞/ 48 阅读

相关如何简单实现视频预览和图片预览

> 工作需要做一个视频预览和图片预览，于是就发现了一个简单省事的预览方法，供大家参考一下，请多指教啊 var videoExts = [".avi", ".mp4",

小灰灰/ 2023年07月25日 06:14/ 0 赞/ 79 阅读

相关 WebAPI接口FileReader实现预览图片

【传送门】[https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader][https_developer.mozil

比眉伴天荒/ 2023年07月11日 12:48/ 0 赞/ 15 阅读

相关图片预览

插件：uploadPreview.min.js <tr> <th>商品图片</th>

Love The Way You Lie/ 2022年07月11日 05:40/ 0 赞/ 516 阅读

相关 JavaScript实现图片在线预览

本打算使用JQuery来实现的在线预览，但是由于使用的$('input\[type=file\]').val()获取的是假路径，而使用下面的语句获取的是文件名 $('inpu

曾经终败给现在/ 2022年06月11日 02:13/ 0 赞/ 546 阅读

相关图片预览新特性 h5 FileReader

图片预览新特性 h5 FileReader <!DOCTYPE html> <html lang="en"> <head> <meta

红太狼/ 2022年05月12日 01:58/ 0 赞/ 337 阅读

相关 JavaScript 中的FileReader对象（实现上传图片预览）

JavaScript 中的FileReader对象（实现上传图片预览）方法一：使用js的FileReader对象 1、FileReader对象简介

ゝ一纸荒年。/ 2022年01月06日 07:55/ 0 赞/ 195 阅读

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 734 阅读

相关 uniapp 实现图片预览单图预览和多图预览

uniapp 实现图片预览单图预览和多图预览关键点就是调用 uni.previewImage({ current: index,

落日映苍穹つ/ 2021年09月02日 03:18/ 0 赞/ 2398 阅读

相关 FileReader预读取文件/图片

FileReader 1、是h5中新增的类，用来对input中type='file'类型进行处理的类 2、能够对上传的文件进行预先读写，实现预览效果

悠悠/ 2021年07月24日 13:41/ 0 赞/ 519 阅读