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 Event学习第十一章 按键的检测
Feb 10 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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 字符串替换的方法
2012/01/10 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
python文件名和文件路径操作实例
2017/09/29 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
python如何写出表白程序
2020/06/01 Python
python 如何上传包到pypi
2020/12/24 Python
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
家长会学生家长演讲稿
2013/12/29 职场文书
党员民主评议个人总结
2014/10/20 职场文书
小浪底导游词
2015/02/12 职场文书
公司更名通知函
2015/04/24 职场文书
雷锋的故事观后感
2015/06/10 职场文书
Python包argparse模块常用方法
2021/06/04 Python
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
Javascript的promise,async和await的区别详解
2022/03/24 Javascript