<!DOCTYPE html> <html> <head lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> </head> <body> <h3>文本选择预览</h3> <input type="file" id="file" onchange="readAsText(this.files)"/> <div id="fileContent" style="background-color: #e3ceab;"></div> <script> function readAsText(files) { if(files.length) { var file = files[0]; var reader = new FileReader(); reader.onload = function(){ document.getElementById("fileContent").innerHTML = this.result; }; reader.readAsText(file); } } function handleFiles(files){ for (var i = 0; i < files.length; i++) { var file = files[i]; var imageType = /image.*/; if (!file.type.match(imageType)) { continue; } var img = document.createElement("img"); img.classList.add("obj"); img.file = file; preview.appendChild(img); var reader = new FileReader(); reader.onload = (function(aImg){ return function(e){ aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } } </script> <hr/> <h3>文本拖拽预览</h3> <div id="dropbox" style="width: 100%;min-height: 200px;background-color: #b2dba1;"> <p>Drop Here</p> <div id="fileContent2" style="background-color: #a8ff60;"></div> <script> var dropbox = document.getElementById("dropbox"); dropbox.addEventListener("dragenter", dragenter, false); dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("drop", drop, false); function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; if(files.length){ var file = files[0]; var reader = new FileReader(); reader.onload = function() { document.getElementById("fileContent2").innerHTML = this.result; }; reader.readAsText(file); } } </script> </div> <hr/> <h3>图片预览</h3> <input type="file" multiple onchange="handleFiles(this.files)"/> <div id="preview"></div> <script> var preview = document.querySelector("#preview"); function handleFiles(files){ console.info(files); for (var i = 0; i < files.length; i++) { var file = files[i]; var imageType = /image.*/; if (!file.type.match(imageType)) { continue; } var img = document.createElement("img"); img.classList.add("obj"); img.file = file; preview.appendChild(img); var reader = new FileReader(); reader.onload = (function(aImg){ return function(e){ aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } } </script> </body> </html>
相关推荐
Html5FileReader文档 Html5FileReader文档 Html5FileReader文档
本HTML5实现多文件图片预览上传功能实例,使用zyFile.js插件
Flutter FileReader本地文件视图小部件,支持多种文件类型,例如Doc Eexcl PPT TXT等,Android由腾讯X5实现(不支持GooglePlay),iOS由WKWebView实现依靠它将此添加到包的pubspec.yaml文件中: 1.9.1 dependencies:...
FileReader文档
纯前端实现图片上传预览(filereader ),HTML5 filereader 实现
HTML5之FILEREADER的使用.pdf
编写程序,统计英文文本文件中的字符数目和单词数目。程序运行时,输入要统计的文件的名称,程序处理后输出字符数目和单词数目。 (程序去除文本开头的空格与回车,统计中将回车换行也统计在内,算两个字符)
基于H5的FileReader实现web端读取shp文件,CSV文件,文本文件坐标,并加载到地图上
文件阅读器filereader,一个用于读取本地文件的 jQuery 扩展这组实用程序允许我们直接从 jQuery 访问 HTML5 FileReader API。 可用功能: $.canReadFiles() 如果当前浏览器实现了 FileReader API,则返回 true $....
文件阅读器FileReader是开源的ac#库,用于通过设置limit和offset参数来分页读取和处理非常大的文本文件。 因为将整个文本文件加载到内存中会导致对象增长,并且.net如果无法为对象分配足够的连续内存,则会抛出OOM...
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并...
FileReader是HTML5 File API的一部分。它实现了一种异步文件读取机制。可以把FileReader想象为XMLHttpRequest,区别只是它读取的是文件系统,而不是远程服务器。为了读取文件中的数据,FileReader提供了如下几个方法...
行阅读器使用 HTML5 文件 API 逐行读取文件。用法用户选择文件后: // Grab a file referencevar file = document . getElementById ( 'my-file-input' ) . files [ 0 ] ;// Create a new instance of the ...
HTML5 FileReader接口学习笔记
主要介绍了JS+HTML5 FileReader对象用法,结合具体实例形式分析了FileReader对象的常用方法及简单使用技巧,需要的朋友可以参考下
给定一个HTML5 File对象(例如从HTML5拖放),将其转换为可读流。 安装 与npm和 $ npm install filereader-stream 例子 var drop = require ( 'drag-and-drop-files' ) var concat = require ( 'concat-stream' ) ...
java FileReader/FileWriter读写字母和数字没问题,但读写汉字乱码。记录下,后面找到解决方法再补上。 public static void main(String[] args) { FileReader fr = null; FileWriter fw = null; try { int a =...
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据。 创建实例 var reader = new FileReader(); 方法 ...
javascript HTML5文件上传FileReader API_.docx