js 上传文件预览的简单实例

 更新时间:2016年08月16日 08:59:41   转载 投稿:jingxian  
下面小编就为大家带来一篇js 上传文件预览的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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 上传文件预览的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • javascripit实现密码强度检测代码分享

    javascripit实现密码强度检测代码分享

    这篇文章主要介绍了javascripit实现密码强度检测,大家参考使用吧
    2013-12-12
  • bootstrap treeview 树形菜单带复选框及级联选择功能

    bootstrap treeview 树形菜单带复选框及级联选择功能

    这篇文章主要介绍了bootstrap treeview 树形菜单带复选框及级联选择功能,代码超简单,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-06-06
  • Bootstrap实现翻页效果

    Bootstrap实现翻页效果

    这篇文章主要为大家详细介绍了Bootstrap实现翻页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 更靠谱的H5横竖屏检测方法(js代码)

    更靠谱的H5横竖屏检测方法(js代码)

    这篇文章主要为大家详细介绍了更靠谱的横竖屏检测方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • js中关于一个分号的崩溃示例

    js中关于一个分号的崩溃示例

    下面的js代码不管if条件的结果是true还是false都会执行大括号的代码,结果发现if条件括号后面多写了分号,崩溃啊
    2013-11-11
  • JS实现获取剪贴板内容的方法

    JS实现获取剪贴板内容的方法

    这篇文章主要介绍了JS实现获取剪贴板内容的方法,涉及javascript基于clipboardData操作剪贴板的相关技巧,需要的朋友可以参考下
    2016-06-06
  • 微信小程序利用云函数获取手机号码

    微信小程序利用云函数获取手机号码

    这篇文章主要介绍了微信小程序利用云函数获取手机号码功能,本文通过实例代码给大家讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • js禁止浏览器的回退事件

    js禁止浏览器的回退事件

    这篇文章主要为大家详细介绍了js禁止浏览器的回退事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 解决JS外部文件中文注释出现乱码问题

    解决JS外部文件中文注释出现乱码问题

    中文乱码在Java Web开发中经常出现,这是由于不同的部分编码不一样造成的,一般在开发中,我们把所有能设编码的地方,全部设置成UTF-8,但是有时候还是会出现乱码的情况。下面通过本文给大家分享JS外部文件中文注释出现乱码的解决方案,一起看看吧
    2017-07-07
  • JavaScript中的alert()函数使用技巧详解

    JavaScript中的alert()函数使用技巧详解

    这篇文章主要介绍了JavaScript中的alert()函数使用技巧详解,本文讲解了普通弹出、带换行的文本、使用制表符、使用变量、使用样式等选择,需要的朋友可以参考下
    2014-12-12

最新评论