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 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
jQuery 操作XML入门
Dec 25 Javascript
JS request函数 用来获取url参数
May 17 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
JS实现商品橱窗特效
Jan 09 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里面的抽象类
2010/01/28 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
利用Python实现命令行版的火车票查看器
2016/08/05 Python
代码分析Python地图坐标转换
2018/02/08 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
编程输出如下图形
2013/11/24 面试题
物流专业大学生的自我鉴定
2013/11/13 职场文书
校园活动策划书范文
2014/01/10 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
2015年元旦活动总结
2014/05/09 职场文书
法制宣传标语
2014/06/23 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
小学课改工作总结
2015/08/13 职场文书
解除合同协议书范本
2016/03/21 职场文书