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 利用初学知识 写出自己的名字

  2. 2016.8.16 Java培训第一天

    1. 十进制转换二进制 31/2=15余1  15/2=7余1 7/2=3余1 3/2=1余1    31的二进制结果为11111 35/2=17余1  17/2=8余1  8/2=4余0 4/2=2 ...

  3. VC++6.0在Win7以上系统上Open或Add to Project files崩溃问题 解决新办法

    崩溃原因是和office高版本冲突,比如我64位win7装了64位office2013及visio就遇到了这个问题(我很纳闷,记得重装系统前装的是32位office2013及visio就未曾遇到该问题 ...

  4. EXCEL表格单元格中包含数字英文和汉字，如何自动去掉汉字，保留英文和数字

    EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字 Function 求数字和字母(对象 As String) '在文本与数字混杂中提取数字和字母   Dim myReg    ...

  5. 阻抗计算(用SI9000如何计算微带线)

    用SI9000如何计算微带线                一．几个概念: 阻抗的定义:在某一频率下,电子器件传输信号线中,相对某一参考层,其高频信号或电磁波在传播过程中所受的阻力称之为特性阻抗,它是 ...

  6. HDU-4532 湫秋系列故事——安排座位 组合数学DP

    题意:有来自n个专业的学生,每个专业分别有ai个同学,现在要将这些学生排成一行,使得相邻的两个学生来自不同的专业,问有多少种不同的安排方案. 分析:首先将所有专业的学生视作一样的,最后再乘以各自学生的 ...

  7. pytessact 出现Error2错误

    x pytessact安装后不起作用 一.没有安装tessact-ocr 点击下载,安装 http://jaist.dl.sourceforge.net/project/tesseract-ocr-a ...

  8. java高薪之路__003_集合

    Java集合可分为Collection和Map两大体系 Collection接口 |---- Set: 元素无序.不可重复 |---- List: 元素有序.可重复 (动态数组) |---- Queu ...

  9. CSS使用总结

    1.visibility和display的区别: visibility:visible; 显示visibility:hidden; 隐藏,但是保留元素所占的空间display:block;       ...

  10. python语言的优点和缺点

    python作为一门高级编程语言,它的诞生虽然很偶然,但是它得到程序员的喜爱却是必然之路. 龟叔给Python的定位是"优雅"."明确"."简单&qu ...