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 中 null、NaN和undefined的区别总结
Apr 10 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 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获取301跳转URL简单实例
2013/12/16 PHP
php单例模式实现方法分析
2015/03/14 PHP
PHP简单日历实现方法
2016/07/20 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
vue接口请求加密实例
2020/08/11 Javascript
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
广州品高软件.net笔面试题目
2012/04/18 面试题
实习单位推荐信范文
2013/11/27 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
消防先进事迹材料
2014/02/10 职场文书
门店业绩提升方案
2014/06/08 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
中考学习决心书
2015/02/04 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL