JavaScript操作文件_动力节点Java学院整理


Posted in Javascript onJune 30, 2017

在HTML表单中,可以上传文件的唯一控件就是<input type="file">。

注意:当一个表单包含<input type="file">时,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才能正确编码并以multipart/form-data格式发送表单的数据。

出于安全考虑,浏览器只允许用户点击<input type="file">来选择本地文件,用JavaScript对<input type="file">的value赋值是没有任何效果的。当用户选择了上传某个文件后,JavaScript也无法获得该文件的真实路径:

通常,上传的文件都由后台服务器处理,JavaScript可以在提交表单时对文件扩展名做检查,以便防止用户上传无效格式的文件:

var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:\fakepath\test.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
  alert('Can only upload image file.');
  return false;
}

File API

由于JavaScript对用户上传的文件操作非常有限,尤其是无法读取文件内容,使得很多需要操作文件的网页不得不用Flash这样的第三方插件来实现。

随着HTML5的普及,新增的File API允许JavaScript读取文件内容,获得更多的文件信息。

HTML5的File API提供了File和FileReader两个主要对象,可以获得文件信息并读取文件。

下面的例子演示了如何读取用户选取的图片文件,并在一个<div>中预览图像:

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);
});

上面的代码演示了如何通过HTML5的File API读取文件内容。以DataURL的形式读取到的文件是一个字符串,类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...,常用于设置图像。如果需要服务器端处理,把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。

回调

上面的代码还演示了JavaScript的一个重要的特性就是单线程执行模式。在JavaScript中,浏览器的JavaScript执行引擎在执行JavaScript代码时,总是以单线程模式执行,也就是说,任何时候,JavaScript代码都不可能同时有多于1个线程在执行。
你可能会问,单线程模式执行的JavaScript,如何处理多任务?

在JavaScript中,执行多任务实际上都是异步调用,比如上面的代码:

reader.readAsDataURL(file);

就会发起一个异步操作来读取文件内容。因为是异步操作,所以我们在JavaScript代码中就不知道什么时候操作结束,因此需要先设置一个回调函数:

reader.onload = function(e) {
  // 当文件读取完成后,自动调用此函数:
};

当文件读取完成后,JavaScript引擎将自动调用我们设置的回调函数。执行回调函数时,文件已经读取完毕,所以我们可以在回调函数内部安全地获得文件内容。

Javascript 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
浅谈Javascript嵌套函数及闭包
Nov 09 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 #Javascript
详解vue组件通信的三种方式
Jun 30 #Javascript
JavaScript实现瀑布流图片效果
Jun 30 #Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 #Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 #Javascript
jQuery表单设置值的方法
Jun 30 #jQuery
JavaScript注册时密码强度校验代码
Jun 30 #Javascript
You might like
php使用json_encode对变量json编码
2014/04/07 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python Socket传输文件示例
2017/01/16 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
优秀实习自我鉴定
2013/12/04 职场文书
运动会口号8字
2014/06/07 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
学校运动会通讯稿
2015/07/18 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
聊聊Python String型列表求最值的问题
2022/01/18 Python