html5 filereader对象读取本地文件、图像

最新推荐文章于 2025-07-02 08:00:00 发布

原创最新推荐文章于 2025-07-02 08:00:00 发布 · 6.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html上传图片预览

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

HTML5的FileReader接口允许在本地预览文件，无需先上传到服务器。通过readAsDataURL方法，可以将图片读取为DataURL字符串并在页面上显示。此功能在现代浏览器中得到支持，简化了图片上传预览的流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在html5之前在本地上传图片后预览的方法是，以前我们通常的做法是将选择的图片文件通过ajax上传至后端服务器，后端对其进行存储，再将图片的URL返回到前端，前端通过这个URL来显示图片。

而HTML5的FileReader接口支持本地预览，FileReader接口主要是将文件读入内存，并提供相应的方法，来读取文件中的数据，当然就能显示本地图片不需上传了。目前高级浏览器实现了FileReader接口，所以像IE6这些老东西直接滚粗。

HTML5中的FileReader对象： FileReader对象主要是把文件读入内存中，并且读取文件中数据。目前为止，firefox3.6+ chrome6+ Safari5.2+ Opera11+及IE10浏览器支持FileReader对象。它有以下5种方法：

readBinaryString
readAsText
readAsDataURL 将对象或文件中的数据读取为一串DataURL字符串，就是将数据以一种特殊格式的URL地址形式直接读入页面。
readAsArrayBuffer
1. abort.

而我们现在要用的是第三种，所以解释了下，其他的具体可以看相关的资料，这里不多解释。

IE：document.selection 即资料解释如下：

  selection   对象 代表了当前激活选中区，即高亮文本块，和/或文档中用户可执行某些操作的其它元素。  
  selection   对象的典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。 

      用户和脚本都可以创建选中区。用户创建选中区的办法是拖曳文档的一部分。脚本创建选中区的办法是在文本区域或类似对象上调用   select   方法。要获取当前选中区，请对   document   对象应用   selection   关键字。要对选中区执行操作，请先用   createRange   方法从选中区创建一个文本区域对象。  
      一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本和/或元素块。尽管空的选中区不包含任何内容，你仍然可以用它作为文档中的位置标志。

一、以前web页面上传以及展示图片原理说明
1. form表单选择图片 ——> 通过php上传存储在服务器端 ——> 服务器返回图片的url给前端页面 ——> 通过url前台展示图片（预览）
2. 如果预览之后不满意，就按照上面的流程重新上传修改预览

二、html5出现之后使用javascript实现FileReade接口
说明：在html5范围之内，通过FileReade接口可以直接先预览图片，然后通过php上传存储在服务器
FileReader接口原理：通过FileReader，可以异步地将本地图片文件加载到本地内存，然后赋予某个javascript变量。然后调用FileReader的readAsDataURL方法，通过将图片数据读取成Data URL的方法，将图片展示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
    <style type="text/css">
        .container{
            float: left;
        }
    </style>
</head>
<body>
<form enctype="multipart/form-data" name="form1">
    <input id="f" type="file" name="f" onchange="change()" />
    <div class="upload">上传图片</div>
    <p>预览:</p>
    <p>
        <img id="preview" alt="" name="pic" />
    </p>
</form>
<script type="text/javascript">
    function change() {
    var pic = document.getElementById("preview"),
        file = document.getElementById("f");

    var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();

     // gif在IE浏览器暂时无法显示
     if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
         alert("图片的格式必须为png或者jpg或者jpeg格式！"); 
         return;
     }
     var isIE = navigator.userAgent.match(/MSIE/)!= null,
         isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;

     if(isIE) {
        file.select();
        var reallocalpath = document.selection.createRange().text;

        // IE6浏览器设置img的src为本地路径可以直接显示图片
         if (isIE6) {
            pic.src = reallocalpath;
         }else {
            // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
             pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
             // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
             pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
         }
     }else {
        html5Reader(file);
     }
}

 function html5Reader(file){
     var file = file.files[0];
     var reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = function(e){
         var pic = document.getElementById("preview");
         pic.src=this.result;
     }
 }



</script>
</body>