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. [问题2014S02] 复旦高等代数II（13级）每周一题（第二教学周）

    问题2014S02  设实系数多项式 \begin{eqnarray*}f(x) &=& a_nx^n+a_{n-1}x^{n-1}+\cdots+a_1x+a_0, \\ g(x) ...

  2. Bootstrap_导航条

    一.基础导航条 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个 ...

  3. GSEA的使用

    下载GSEA 网址:http://software.broadinstitute.org/gsea/downloads.jsp gsea2-2.2.2.jar c2.cp.kegg.v5.1.symb ...

  4. mysql 登录及常用命令

    一.mysql服务的启动和停止 mysql> net stop mysql mysql> net start mysql 二.登陆mysql mysql> 语法如下: mysql - ...

  5. jquery中通过全局变量来禁止多次ajax请求

    var ajaxstate=false;//定义全局变量,通过这个变量来获得当前的ajax状态 $(function(){ $(document).ajaxStart(function(){ $(&q ...

  6. Android 广播机制概论

    Android 中的每一个应用程序都可以对自己感兴趣的广播进行注册,这样,该程序就只会接收到自己所关心的广播内容,这些广播可能是来自于系统的,也可能是来自于其他应用程序. 广播分为2种: 1.标准广播 ...

  7. features block

    很轻松就能把一个新建的block导出到一个module包里.

  8. miniui设置边框的方法

    if (field == "loginname") { if (record._id == 2) { e.cellHtml = ""; e.cellStyle ...

  9. LCT专题练习

    [bzoj2049]洞穴勘测 http://www.cnblogs.com/Sdchr/p/6188628.html 小结 (1)LCT可以方便维护树的连通性,但是图的连通性的维护貌似很麻烦. [bz ...

  10. windows docker测试二 下载container

    安装dockertoolbox,提供了一个docker的界面工具 Kitematic 和字符终端: Docker Quickstart Terminal (这里安装的Kitematic 是Alpha版 ...