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

赞 (0)

相关推荐

  • JavaScript File API文件上传预览

    JavaScript File API文件上传预览

    对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情,通常我们能做的仅仅是使用<input type="file">标签来上传文件.实现过程是:选取文件的时候value 属性保存了用户指定的文件的名称,表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名.再获取服务器返回的地址,然后做预览. 但是如果有一天我们要上传一个图片,传了图片后预览想换另一张图片,就又得先上传到服务器再预览.在网络比较慢的情况下,这样真的很折腾. 所以我们某些时候需要先预览

  • jsp中点击图片弹出文件上传界面及预览功能的实现

    花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:

  • js前端实现多图图片上传预览的两个方法(推荐)

    一.将图片转成icon码的实现方式 html代码: <div class="yanzRight"> <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this,5)" type="file"/> <span class=&qu

  • js HTML5多图片上传及预览实例解析（不含前端的文件分割）

    本文实例为大家分享了js HTML5多图片上传及预览实例,供大家参考,具体内容如下 主要运用  1.HTML5 files可以选择多文件,以及获取多文件信息  2.XMLHTTPRequest对象,发送HTTP传输请求  3.将每一个文件放在FormData,进行传输  4.利用readAsDataURL将图片内容直接变成url,放在img标签的src当中,生成可预览的图片 html+css+js代码 <!DOCTYPE html> <head> <meta http-equ

  • 基于HTML5的可预览多图片Ajax上传

    基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇"Ajax Upload多文件上传插件"的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中

  • 用file标签实现多图文件上传预览

    js 代码: <script> //下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document.getElementById("files"); var dd = document.getElementById("preview"); dd.innerHTML = ""; var fileList = docObj.files; for (var i

  • JavaScript File API实现文件上传预览

    JavaScript File API实现文件上传预览

    一.概述 以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScript 一直是无法访问本地文件的.于是,为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能,我们就不得不求助于特定浏览器所提供的各种技术了.比如对于 IE,我们需要通过 ActiveX 控件来获取对本地文件的访问能力,而对于 Firefox,同样也要借助插件开发.由于不同浏览器的技术实现不尽

  • PHP仿微信多图片预览上传实例代码

    生产图片区域,上传按钮#btn可替换自己想要的图片 <ul id="ul_pics" class="ul_pics clearfix"> <li><img src="logo.png" id="btn" class="img_common" /></li> </ul> plupload上传 var uploader = new plupload.U

  • 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

  • AngularJs上传前预览图片的实例代码

    在工作中,使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,之前查了一些资料,结合实践,得出一种比较实用的方法,相对简化版,在这里记录一下,如有不同看法,欢迎一起沟通,一起成长. demo.html: <!doctype html> <html ng-app="myTestCtrl"> <head> <meta charset="UTF-8"> <title>demo&l

  • Kindeditor单独调用单图上传增加预览功能的实例

    html代码: <p><input type="hidden" id="url1" name="IDCardPicture1" value="" /> <input type="button" id="image1" value="选择图片" style="width: 150px;height: 30px;" /&g

  • JavaScript图片上传并预览的完整实例

    JavaScript图片上传并预览的完整实例

    目录 一.前端界面是通过jqgrid展示的 二.jqgrid特性 三.代码实例 1.jqgrid页面展示 2.模块页面 3.ajax实现异步请求 五.效果展示 总结 一.前端界面是通过jqgrid展示的 jqgrid是典型的B/C架构(浏览器/服务器模式),服务器端只需提供数据管理,浏览器只需负责数据显示. jqGrid是用ajax实现对请求和响应的处理,支持局部实时刷新. 二.jqgrid特性 通过配置url地址数据显示格式 支持行编辑,列搜索过滤 支持分页 添加表单支持文件上传 链式调用 三

  • JS上传前预览图片实例

    预览图片的js代码: 复制代码 代码如下: <script type="text/javascript">        function setImagePreview(docObj,localImagId,imgObjPreview)         {            if(docObj.files && docObj.files[0])            {                //火狐下,直接设img属性            

  • servlet实现文件上传、预览、下载、删除功能

    servlet实现文件上传、预览、下载、删除功能

    servlet实现文件上传,预览,下载和删除,供大家参考,具体内容如下 一.准备工作: 1.1 文件上传插件:uploadify: 1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar 1.3 将数据转成JSON对象需要jar包:commons-beanutils-1.8.3.jar.commons-collections-3.2.1.jar.commons-lang-2.6.jar.commons-logging-1.1.

  • JQ图片文件上传之前预览功能的简单实例(分享)

    1.先准备一个div onchange触发事件 <input type="file" onchange="preview(this)" ></span> <div id="preview"></div> 2.写JS代码 //上传图片之前预览图片 function preview(file){ if (file.files && file.files[0]){ var reader =

  • uploadify java实现多文件上传和预览

    uploadify java实现多文件上传和预览

    本文实例为大家分享了java文件上传和预览实现代码,供大家参考,具体内容如下 1.下载uploadify插件 2.index.html <!DOCTYPE html> <html lang="en"> <head> <@head/> <script src="<@path/>/js/uploadify-v3.1/jquery.uploadify-3.1.js"></script> &

  • 原生js FileReader对象实现图片上传本地预览效果

    原生js FileReader对象实现图片上传本地预览效果

    本文实例为大家分享了js实现图片上传本地预览效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta

随机推荐