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 相关文章推荐
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
Node登录权限验证token验证实现的方法示例
May 25 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 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
js自定义回调函数
2015/12/13 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
node.js基础知识汇总
2020/08/25 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[00:14]护身甲盾
2019/03/06 DOTA
浅谈flask中的before_request与after_request
2018/01/20 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
python for和else语句趣谈
2019/07/02 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
企业授权委托书范本
2014/04/02 职场文书
大学生求职计划书
2014/04/30 职场文书
小学优秀学生评语
2014/12/29 职场文书
倡议书格式及范文
2015/04/29 职场文书
Python实现天气查询软件
2021/06/07 Python