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 设计模式 安全沙箱模式
Sep 24 Javascript
JavaScript执行效率与性能提升方案
Dec 21 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
axios封装与传参示例详解
Oct 18 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中生成UUID自定义函数分享
2015/06/10 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
python读取Android permission文件
2013/11/01 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
python http接口自动化脚本详解
2018/01/02 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
初中班主任经验交流材料
2014/05/16 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
结婚老公保证书
2015/02/26 职场文书
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB