`
v5qqbrowser
  • 浏览: 356712 次
文章分类
社区版块
存档分类
最新评论

利用input type=file和FileReader API实现在浏览器客户端通过选择对话框读取文件

 
阅读更多

如题，利用input type=file和FileReader API实现在浏览器客户端通过选择对话框读取文件，代码如下，以读取文本文件为例：

<!DOCTYPE html>
<html>
  <head>
    <title><input> File Selection</title>
  </head>
  <body>
    <h1>HTML5 <input> File Selection</h1>
    <h3>Example 1</h3>
    <input type="file" id="fileSelector" multiple />
    <script type="text/javascript">
      var message = [];

      if (!document.getElementById('fileSelector').files) {
        message = '<p>浏览器不支持FileReader API</p>';
      
        document.querySelector('body').innerHTML = message;
      }
      else {
        document.getElementById('fileSelector').addEventListener('change', handleFileSelection, false);
      }
      
      function handleFileSelection(evt) {    
        var files = evt.target.files;  
        if (!files) {
          msa.alert("<p>At least one selected file is invalid - do not select any folders.</p><p>Please reselect and try again.</p>");
          return;
        }
		
		var fileType = files[0].type;
		
		reader = new FileReader();
		
		if (fileType.indexOf('text/plain') == -1) {
            alert('请选择文本文件~');
            return;
        }

        reader.onload = function(e) {
			console.log(this.result);
        }
        reader.readAsText(files[0]);
      }
    </script>
  </body>
</html>


分享到：
| 将一个整数的二进制奇数位和偶数位互换
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    LineReader:使用 HTML5 FileReader API 在浏览器中逐行读取文件

    用法用户选择文件后： // Grab a file referencevar file = document . getElementById ( 'my-file-input' ) . files [ 0 ] ;// Create a new instance of the LineReadervar lr = new LineReader ( ) ;// Bind to ...

    HTML5 文件域+FileReader 分段读取文件并上传到服务器

    说明：使用Ajax方式上传，文件不能过大，最好小于三四百兆，因为过多的连续Ajax请求会使后台崩溃，获取InputStream中数据会为空，尤其在Google浏览器测试过程中。 1.简单分段读取文件为Blob，ajax上传到服务器 ...

    【JavaScript源代码】js实现上传图片功能.docx

    　前端上传图片的原理是：运用input type=“file”的标签获取图片，再使用FileReader这个对象 new 一个实例，通过这个对象的readAsDataURL()方法读取file标签获取的图片并转换为base64格式，完成之后通过ajax之类的...

    JS中FileReader类实现文件上传及时预览功能

    FileReader是H5浏览器才支持的JS类，如果不支持H5de浏览器可以使用FormData类实现文件的上传预览，使用可以参考我的下一篇博客：JS中FormData类实现文件上传 代码： &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;...

    读取input:file的路径并显示本地图片的方法

    代码如下: &lt;!... &lt;head&gt; &lt;... charset=UTF-8″ http-equiv=”... [removed] var loadImageFile = (function () { if (window.FileReader) { var oPreviewImg = null, oFReader = new window.FileReader(), rFilt

    javascript读取excel数据

    input type="file" /&gt; &lt;div id="demo"&gt; [removed] /* FileReader共有4种读取方法： 1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。 2.readAsBinaryString(file)：将文件读取为二进制字符串 3....

    vue实现文件上传读取及下载功能

    文件的上传利用input标签的type=”file”属性，读取用FileReader对象，下载通过创建a标签实现 &lt;div class=filediv&gt; &lt;el click=downloadFile&gt;下载 &lt;div id=fileselect&gt; &lt;el xss=removed type=file&gt; &lt;...

    基于javascript html5实现多文件上传

    本文实例为大家分享了javascript html5实现多文件上传的实现方法，具体内容如下 ... &lt;div class=container&gt; ... 重点就是如何处理这个change事件了，使用H5新的FileReader接口读取文件并打成base64编码

    knockout.files:剔除绑定，用于通过FileReader读取文件

    敲除文件一个简单的剔除绑定2.3+，允许您使用HTML5 FileReader功能将文件加载到浏览器中。 现在有了模块加载器和拖放支持...哇！正在安装将基因敲除2.3.js添加到您的项目中，然后将基因敲除.files.js添加到您的项目...

    JavaScript中读取和保存文件实例

    话说今天只是粗略浏览了一下Proxy SwitchySharp的源码，就收获了不少东西，其中就包括本文要介绍的读取和保存文件。因为Google还不提供同步插件数据的功能，所以导入和导出插件配置就必须和文件打交道了。而出于安全...

    Leaflet.FileLayer, 使用HTML5文件API将文件本地( GeoJSON，KML，GPX ) 加载为层.zip

    Leaflet.FileLayer, 使用HTML5文件API将文件本地( GeoJSON，KML，GPX ) 加载为层 Leaflet.FileLayer使用 ...简单的地图控件用户可以在本地浏览文件它被本地读取( FileReader ) 并转换为 GeoJSON最终作为一个层加载 ！

    HTML5 device access 设备访问详解

    主要为利用input type=file, accept="image/*" 进行处理 图片预览方式（两种） const file = e.target.files[0] // 方式1 const url1 = window.URL.createObjectURL(file); let url2 // 方式2 const reader = new ...

    oi.file:角度文件上传器

    在发布到服务器之前上传图像（如果浏览器支持FileReader） 通过xhr和iframe上传图片（适用于旧版浏览器） 文件数据已嵌入模型中，但可以单独读取 使用POST方法上传文件，每个文件每个请求 对于AngularJS 1.2+，...

    xmp-js:从JPEG提取和解析XMP

    超轻便，快速JavaScript库，用于从由Adobe Photoshop和Adobe Lightroom编写的JPEG文件中读取和解析元数据（例如Title ， Description等）。 安装 npm i xmp-js 用法 在浏览器中 &lt; script src = "dist/xmp.iife....

    JS实现图片预览的两种方式

    那么要实现预览有两种方式：一种是用window.URL.createObjectURl方法对选择的图片数据（可以勉强理解为input的value）生成一个blob对象路径，第二种是用获取 FileReader读取器。 那么无论那种方法，首先都得得到文件...

    用java编写的记事本，基本功能都实现了啊！

    import java.io.FileReader; import java.io.FileWriter; import java.io.IOException; import javax.swing.BorderFactory; import javax.swing.JFileChooser; import javax.swing.JFrame; import javax.swing....

    JS+HTML5 FileReader对象用法示例

    FileReader 实例中有四个方法来读取文件数据 1、readAsBinaryString(Blob|File) 2、readAsDataURL(Blob|File) 3、readAsText(Blob|File) 4、readAsArrayBuffer(Blob|File) FileReader 实例包含很多事件（onerror, ...

    基于JavaScript FileReader上传图片显示本地链接

    使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个&lt;input type=”text...

    Public.zip

    file: "#file", // 上传图片的&lt;input type="file"&gt;控件的选择器或者DOM对象 view: "#view", // 显示截取后图像的容器的选择器或者DOM对象 ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象 loadStart: ...

    js实现纯前端的图片预览

    在这之前，我曾经通过订阅input[type=file]元素的onchange事件，一旦更改路径则将图片上传至服务器，接着就获取图片路径并赋值到img元素上。先不管文件异步提交的解决方案，就是服务端清理那些临时的预览图片已经...

Magicbox
Global site tag (gtag.js) - Google Analytics