一、FileReader

FileReader 对象允许Web应用程序异步读取存储在用户计算机中的文件(或缓冲区的原始数据),使用File或Blob对象指定要读取的文件或数据。

1.1 实例化

var reader = new FileReader()

1.2 事件类型

  • FileReader.onload

    • 每次成功完成读取操作完成时触发loading事件

  • FileReader.onprogress

    • 读取Blob 内容时触发进度 progress 事件

1.3 方法

  • FileReader.readAsDataURL()

    • 开始读取指定的Blob内容,完成后,result 属性包含一个用URL表示的文件数据。

  • FileReader.readAsArrayBuffer()

    • 开始读取指定的Blob内容,完成后,result 属性包含一个用 ArrayBuffer 表示的文件数据。

      HTML

      <input type="file" onchange="previewFile()"><br>
      <img src="" height="200" alt="Image preview..."
      JavaScript function previewFile() {
      var preview = document.querySelector('img');
      var file = document.querySelector('input[type=file]').files[0];
      var reader = new FileReader();
      reader.addEventListener("load", function () {
      preview.src = reader.result;
      }, false);
      if (file) {
      reader.readAsDataURL(file);
      }
      }
  • FileReader.readAsText()

    • 开始读取指定的Blob内容,完成后,result 将文件的内容作为一个文本字符串。

二、在Web 应用中使用files对象

2.1 访问所选文件

<input multiple id="upload_input" type="file" accept="image/*" />
使用原生DOM选择器获取元素
var files = document.getElementById('upload_input').files;

files 是一个对象,包含着所选文件列表的信息和一个 length 属性

> console.log(files);
< FileList {0: File, 1: File, 2: File, length: 3}
<FileList
0:File
lastModified:1481789988885
lastModifiedDate:Thu Dec 15 2016 16:19:48 GMT+0800 (中国标准时间)
name:"my_order.png"
size:93453
type:"image/png"
webkitRelativePath:""
1:File
2:File
length:3

2.2 通过change 事件访问所选文件

var inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
var fileList = this.files; /* now you can work with the file list */
}

2.3 获取所选文件的基本信息

访问files对象的自带的length属性,得到被选择文件的个数:

var numFiles = files.length;

可以通过数组列表,检索出被选择的单个文件:

for (var i = 0, numFiles = files.length; i < numFiles; i++) {
var file = files[i];
..
}

每个 file 对象拥有三个属性,包含着文件的name,size,type

name:文件名,只读,不包含文件路径;

size:文件字节数,64-bit 整型;例如92kb 的文件,它的size = 92 * 1024 b;

type:文件的MIME类型,若不确定则为“”(空)。

2.4 使用click 方法隐藏 input 元素

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Select some files</a>

给隐藏的 input 增加事件

var fileSelect = document.getElementById('fileSelect'),
fileEle = document.getElementById('fileElem');
fileSelect.addEventListener('click', function(e) {
if(fileEle) {
fileEle.click();
}
}, false)

三、实例

3.1 显示用户选中图片的缩略图

var showThumbnails = function (files) {
for(var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /^image\//;

if(!imageType.test(file.type)) {
continue;
}
var img = document.createElement('img');
img.classList.add('obj');
img.file = file;
preview.appendChild(img); // 假设preview是缩略图的展示位置

var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (function (aImg) {
return function (e) {
aImg.src = e.target.result; // e.target 指向 reader
}
})(img)
}
}

每个缩略图都添加了一个 obj 的类名,方便后期查找。还向每个图像指定了一个指向文件的file属性,以供稍后实际上传,然后用Node.appendChild() 将新的缩略图添加到预览区域。

紧接着,我们实例化了一个 FileReader 来处理异步加载图像并将其附加到img 元素上。调用readAsDataURL() 在后台启动读取操作,图像加载完毕,它们将被转换为传递给onload回调的数据:URL。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title></title>
</head>
<body>
<div class="logo">
<img src="111.png" />
</div>
<div class="upload">
<p>上传图片</p>
<form>
<input multiple id="upload_input" type="file" />
</form>
</div>
</body>
<script>
window.onload = function () {
var Upload = {
change: function () {
var oform = document.querySelector('form'),
oFiles = document.getElementById('upload_input').files;
console.log(oFiles)
for(var key in oFiles) {
if(oFiles.hasOwnProperty(key)) {
console.log('file_name:'+oFiles[key].name);
console.log('file_size:'+oFiles[key].size);
console.log('file_type:'+oFiles[key].type);
}
}
}
};
document.getElementById('upload_input').addEventListener('change',Upload.change);
}
</script>
</html>

HTML 5 使用 FileReader、FormData实现文件上传的更多相关文章

  1. Multipart/form-data POST文件上传详解

    Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...

  2. Multipart/form-data POST文件上传详解(转)

    Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...

  3. 构建multipart/form-data实现文件上传

    构建multipart/form-data实现文件上传 通常文件上传都是通过form表单中的file控件,并将form中的content-type设置为multipart/form-data.现在我们 ...

  4. FormData实现文件上传实例

    单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自从有了HTML5的FormData后,老板再也不用担心我的上传了. Form ...

  5. HTML5 FormData实现文件上传实例

    表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自从有了HTML5的FormData后,老板再也不用担心我的上传了. For ...

  6. iframe 模拟ajax文件上传and formdata ajax 文件上传

    对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 iframe  的文件上传的代码 本人语言表达能里有限,不多说了 直接上代码. 首先看 总体页面. 总共就三个文件. 实际上也就是 ...

  7. spring mvc利用MultipartResolver解析Multipart/form-data进行文件上传

    之前的表单数据都是文本数据,现记录:利用MultipartResolver进行文件上传. ①首先,需引入commons-fileUpload和commons-io jar包,pom.xml文件的坐标: ...

  8. Multipart/form-data POST文件上传

    简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form method="post"action=&qu ...

  9. vue使用formData进行文件上传

    本文为博主原创,未经允许不得转载 1.vue页面 <ux-form ref="formRef" layout="vertical"> <ux- ...

  10. .NET和.NET Core Web APi FormData多文件上传对比

    前言 最近因维护.NET和.NET Core项目用到文件上传功能,虽说也做过,但是没做过什么对比,借此将二者利用Ajax通过FormData上传文件做一个总结,通过视图提交表单太简单,这里不做阐述,希 ...

随机推荐

  1. springmvc 整合shiro

    1.引用maven <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro ...

  2. HDU 5957 Query on a graph (拓扑 + bfs序 + 树剖 + 线段树)

    题意:一个图有n个点,n条边,定义D(u,v)为u到v的距离,S(u,k)为所有D(u,v)<=k的节点v的集合 有m次询问(0<=k<=2): 1 u k d:将集合S(u,k)的 ...

  3. AE IRasterCursor 获取栅格图层像素值

    在编写使用栅格图层的代码时,常常要获取栅格图层的像素值(PixelValue).如果想获取某一点的像素值,可以使用IRaster2中的getPixelValue方法.但如果想要获得的是图层中的某一块甚 ...

  4. python技巧31[python中使用enum][转]

    以下几种方法来模拟enum:(感觉方法一简单实用) # way1 class Directions:     up = 0     down = 1     left = 2     right =3 ...

  5. iOS平台设置系统状态栏(通知栏、顶部状态栏)样式背景颜色或透明

    5+App开发 状态栏 配置系统状态栏样式 iOS平台可支持对系统状态栏样式的配置,在应用manifest.json文件的plus->distribute->apple下添加UIStatu ...

  6. React 组件的生命周期API和事件处理

    一.简单记录React的组件的简洁的生命周期API: A:实例化期: 一个实例第一次被创建时所调用的API与其它后续实例被创建时所调用的API略有不同. 实例第一次被创建时会调用getDefaultP ...

  7. 休息,考完了MCSD

    终于考完了~这次的证书签名居然还是鲍尔默的.

  8. 自己动手绘制ToolBar

    VC MFC工具栏(CToolBar)控件 工具栏 工具栏控件在控件面板里没有对应的选项(图标),但有一个工具栏控件类CToolBar,所以我们如果要创建一个工具栏控件并显示在窗口里的话,只能用代码来 ...

  9. Codeforces777C Alyona and Spreadsheet 2017-05-04 17:46 103人阅读 评论(0) 收藏

    C. Alyona and Spreadsheet time limit per test 1 second memory limit per test 256 megabytes input sta ...

  10. 动态的把固定格式的json数据以菜单形式插入

    var root=$("#side-menu"); $(menuData).each(function(i,n){ var top1Li=$("<li>< ...