HTML5文件API之FileReader

在文件上传之前，我们总想预览一下文件内容，或图片样子，html5 中FileReader正好提供了2种方法，可以在不上传文件的情况下，预览文件内容。

图片预览：readAsDataURL(file);

文件预览：readAsText();（必须保证文件编码格式与代码编码格式相同，预览中文才不会乱码）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTML5练习</title><style type="text/css"></style>
</head>
<body><input type = file id = 'file'/><input type = button onclick = 'readImg()' value = '读取图像'/> <input type = button onclick = 'readFile()' value = '读取文件'/><div id = 'result'></div><script language = 'javascript'>function showFileName(){var files = document.getElementById('file').files;var file;for(var i = 0, len = files.length; i < len; i++){file = files[i];console.log(file.name);}}function readImg(){var file = document.getElementById('file').files[0];if(!/image\/\w+/.test(file.type)){alert("请确保文件为图像类型！");return false;}var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function(e){var result = document.getElementById('result');result.innerHTML = "<img src = '"+this.result+"' alt = ''/>";};}function readFile(){var  file = document.getElementById('file').files[0];var reader = new FileReader();reader.readAsText(file);reader.onload = function(f){var result = document.getElementById('result');result.innerHTML = this.result;}}</script>
</body>
</html>

转载于:https://www.cnblogs.com/codelovers/p/4415590.html

HTML5文件API之FileReader相关推荐

html5支持ajax和jQuery吗,使用HTML5文件上传与AJAX和jQuery(Using HTML5 file uploads with AJAX and jQuery)...
使用HTML5文件上传与AJAX和jQuery(Using HTML5 file uploads with AJAX and jQuery) 诚然,Stack Overflow上有类似的问题,但似乎并 ...
HTML5 file api读取文件的MD5码工具
1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆 ...
HTML5中新增的文件API和拖拽API详解
文件API 在HTML5之前的,从网页上传文件一次只能上传一个文件,而且也无法对要上传的文件做更深一步的操作. HTML5提供了一个系列关于文件操在的API,通过使用这些API,对于从Web页面访问本 ...
基于HTML5拖放API：目前市面上的一些修图工具软件带有自动为图片添加不同款式相框的功能，用户可以选择本地图片文件然后为其添加相框效果
这是一份很简单的作业,由于百度当时没找到,就自己写了一下,命名不是很机智只是为了写的快且好懂,使用只需要将桌面的图片拖拉进里面就直接生成一个新的带相框的图片,代码很短好理解.. <!DOCTYP ...
基于html5 File API文件操作
文章来源:小青年原创发布时间:2016-08-16 关键词:blob,File,FileReader,DataURI,URL 转载需标注本文原始地址: http://zhaomenghuan. ...
html录音并转为音频文件,HTML5音频API Web Audio
此文介绍HTML5音频API的主要框架和工作流程,因为音频处理模块很多,因此只简单介绍几种音频处理模块,并通过例子来展示效果.后续会介绍利用HTML5音频API实现的项目,欢迎大家关注,敬请期待. H ...
html5文件域的自动获取,HTML5 文件域+FileReader 读取文件(一)
在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点: 每次只能选择一个文件进行上传客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容一.File ...
Resumable.js - 基于HTML5 File API的可断点续传的文件上传插件
http://resumablejs.com/ A JavaScript library providing multiple simultaneous, stableand resumable up ...
开大你的音响，感受HTML5 Audio API带来的视听盛宴
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越W ...
html5自动生成图片,HTML5拖放API如何实现自动生成相框功能 HTML5拖放API实现自动生成相框功能代码...
HTML5拖放API如何实现自动生成相框功能?下面小编给大家分享一下HTML5拖放API实现自动生成相框功能代码,代码很详细,小编觉得挺不错的,有需要的小伙伴们可以来看看. 实现功能: 将桌面图片拖入 ...

HTML5文件API之FileReader

HTML5文件API之FileReader相关推荐

最新文章

热门文章