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. java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: NO)

    在更新项目之后,做了一定的改动后发现竟然报错了,刚才还好好的. java.sql.SQLException: Access denied for user 'root'@'localhost' (us ...

  2. SPOJ 375. Query on a tree （树链剖分）

    Query on a tree Time Limit: 5000ms Memory Limit: 262144KB   This problem will be judged on SPOJ. Ori ...

  3. AtCoder Beginner Contest 050 ABC题

    A - Addition and Subtraction Easy Time limit : 2sec / Memory limit : 256MB Score : 100 points Proble ...

  4. TortoiseGit 连接每次都要输入用户名和密码

    当你配置好git后,在C:\Documents and Settings\Administrator\ 或者  C:\Users\Administrator 目录下有一个 .gitconfig 的文件 ...

  5. Unity3d 脚本相互调用

    unity中三种调用其他脚本函数的方法 第一种,被调用脚本函数为static类型,调用时直接用  脚本名.函数名().很不实用…… 第二种,GameObject.Find("脚本所在物体名& ...

  6. 16s及宏基因组测序公司资源--20161104

    锐羿基因: http://www.realbio.cn/index.php?c=list&cs=keyandongtai& 科研动态更新及时 青岛过程能源所: http://www.c ...

  7. px和em的区别（转）

    在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位, ...

  8. 【转】Hostapd工作流程分析

    [转]Hostapd工作流程分析 转自:http://blog.chinaunix.net/uid-30081165-id-5290531.html Hostapd是一个运行在用户态的守护进程,可以通 ...

  9. 0060 Linux SELinux 管理命令

    1. SELinux 的起源 SELinux 是一个面向政府和行业的产品,由 NSA.Network Associates.Tresys 以及其他组织设计和开发.尽管 NSA 将其作为一个补丁集引入, ...

  10. cxf笔记记录

    一.Web Service框架介绍: 1. WebService框架的作用: -- WebService只是一种思想,不是一个具体的框架. -- 它也是javaEE的规范. -- 它可以跨平台(操作平 ...