1. FILE API

html5提供了FIle和FileReader两个方法，可以读取文件信息并读取文件。

2. example

<html>

<body>

<div id="test-image-preview"

style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center center;"> </div>

<br/>

<div id="test-file-info"></div>

<br/>

<input type="file" id="test-image-file">

<script type="text/javascript">

var

    fileInput = document.getElementById('test-image-file'),

    info = document.getElementById('test-file-info'),

    preview = document.getElementById('test-image-preview');

// 监听change事件:

fileInput.addEventListener('change', function () {

    // 清除背景图片:

    preview.style.backgroundImage = '';

    // 检查文件是否选择:

    if (!fileInput.value) {

        info.innerHTML = '没有选择文件';

        return;

    }

    // 获取File引用:

    var file = fileInput.files[0];

    // 获取File信息:

    info.innerHTML = '文件: ' + file.name + '<br>' +

                     '大小: ' + file.size + '<br>' +

                     '修改: ' + file.lastModifiedDate;

    if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {

        alert('不是有效的图片文件!');

        return;

    }

    // 读取文件:

    var reader = new FileReader();

    reader.onload = function(e) {

        var

            data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'

        preview.style.backgroundImage = 'url(' + data + ')';

    };

    // 以DataURL的形式读取文件:

    reader.readAsDataURL(file);

});

</script>

</body>

</html>

以DataURL的形式读取到的文件是一个字符串，类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...，

常用于设置图像。如果需要服务器端处理，把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。

3. 解释

上面的代码还演示了JavaScript的一个重要的特性就是单线程执行模式。在JavaScript中，浏览器的JavaScript执行引擎在执行JavaScript代码时，总是以单线程模式执行，也就是说，任何时候，JavaScript代码都不可能同时有多于1个线程在执行。

你可能会问，单线程模式执行的JavaScript，如何处理多任务？

在JavaScript中，执行多任务实际上都是异步调用，比如上面的代码：

reader.readAsDataURL(file);

就会发起一个异步操作来读取文件内容。因为是异步操作，所以我们在JavaScript代码中就不知道什么时候操作结束，因此需要先设置一个回调函数：

reader.onload = function(e) {

    // 当文件读取完成后，自动调用此函数:

};

当文件读取完成后，JavaScript引擎将自动调用我们设置的回调函数。执行回调函数时，文件已经读取完毕，所以我们可以在回调函数内部安全地获得文件内容。

js 上传文件预览的更多相关文章

  1. js上传和预览图片

    [1].[代码] [HTML]代码 跳至 [1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  2. jQuery+HTML5实现上传文件预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  3. 原生JS上传,实现预览并且兼容大部分IE

    // 前提条件: ie浏览器模式下,用户要允许ie默认的加载项:以下兼容ie的方法才会生效 // 图片上传预览 IE是用了滤镜 function previewImage(file) { var MA ...

  4. js上传并且预览图片

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. servlet实现文件上传，预览，下载和删除

      一.准备工作 1.1 文件上传插件:uploadify: 1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar 1.3 将数 ...

  6. atitit.javascript js 上传文件的本地预览

    atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL  1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...

  7. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  8. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  9. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

随机推荐

  1. php数组插入数据库这个功能该怎么实现

    原文网址:https://segmentfault.com/q/1010000004048449 比如一个数组$a=array("a"=>"1",&quo ...

  2. html、css 【珍藏】

       行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效.     块级元素: 各占据一 ...

  3. Masonry+拖动

    最近遇到一个问题,用Masonry写的布局: 拖动其中某个view,拖动方法按传统的写成如下形式.如果view中的label更改text值,拖动之后的view就会回到最初被设定的位置. - (void ...

  4. [翻译]LSP程序的分类

    翻译的太垃圾,不建议其它人阅读本文. Note:LSP现在已经不推荐使用.自windows8和windows Server2012开始,使用Windows Filtering Platform. Wi ...

  5. Flex 学习笔记 ComboBox内容框宽度

    如何设置ComboBox下拉选项框的宽度呢 左边下拉框发现字符太长了   属性里也找不到相关宽度可以设置,解决如下 <!--添加open事件 打开下拉选项框时设置--> <s:Com ...

  6. STM32学习笔记(九) 外部中断，待机模式和事件唤醒

    学会知识只需要不段的积累和提高,但是如何将知识系统的讲解出来就需要深入的认知和系统的了解.外部中断和事件学习难度并不高,不过涉及到STM32的电源控制部分,还是值得认真了解的,在本文中我将以实际代码为 ...

  7. setColorFilter()滤镜

    ----------转载于:http://blog.sina.com.cn/s/blog_5da93c8f01012pkj.html 通过setColorFilter可以实现滤镜效果. 如:     ...

  8. tfs 分支

    集团-IT部张强 11:15:211.主干时刻处于稳定状态,随时可以发布.设专门人员对主干代码进行管理,普通开发人员只读. 2.为开发任务建立开发分支.常规的可以以小组为单位建立分支,较大的任务可以建 ...

  9. Windows 7 封装与定制不完全教程

    Windows 7 封装与定制不完全教程 从定制Win7母盘到封装详细教程 手把手教你定制WIN7小母盘 Windows 7 封装与定制不完全教程 [教程] Windows 7 封装与定制不完全教程( ...

  10. angularjs简述

    1.MVC设计模式 MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式 Model(模型)表示应用程序核心(比如数据库记录列表 ...