<!DOCTYPE html>

<html>

<div id="container"  onclick="choosefile();">

    <div style="text-align:center">Drag and drop files here to upload.</div>

    <input type="file" id="file0" style="display: none" onchange="selectedFile();">

</div>

</html>

<style type="text/css">

#container{

    min-width: 400px;

    min-height: 280px;

    border: 2px dotted #000;

    -moz-border-radius: 8px;

    background-color:yellow;

}

</style>

<script type="text/javascript">

function choosefile() {

       var f = document.getElementById("file0");

       f.click();//因为被隐藏了，所以用一个函数调用模仿手动点击事件

}

function selectedFile(){

    if(1){

        var selectedFile = document.getElementById('file0').files[0];

        var name = selectedFile.name;//读取选中文件的文件名

        var size = selectedFile.size;//读取选中文件的大小

        console.log("文件名:"+name+"大小:"+size);

        var reader = new FileReader();//这是核心,读取操作就是由它完成.

        reader.readAsText(selectedFile);//读取文件的内容,也可以读取文件的URL

        reader.onload = function () {

            //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可

            console.log(this.result);

        }

    }

}

</script>

HTML-点击Div读取本地文件内容的更多相关文章

  1. 手工创建tomcat应用，以及实现js读取本地文件内容

    手工创建tomcat应用: 1.在webapps下面新建应用目录文件夹 2.在文件夹下创建或是从其他应用中复制:META-INF,WEB-INF这两个文件夹, 其中META-INF清空里面,WEB-I ...

  2. QML 读取本地文件内容

    QML 对本地文件的读写 QML 里似乎没有提供直接访问本地文件的模块,但是我们能够自己扩展 QML,给它加上访问本地文件的能力. Qt 官方文档对 QML 是这样介绍的: It defines an ...

  3. 前台JS（type=‘file’）读取本地文件的内容，兼容各种浏览器

    [自己测了下,能兼容各种浏览器,但是读取中文会出现乱码.自己的解决方法是用notepad++把txt文件编码改为utf-8(应该是和浏览器编码保持一致吧?..)] 原文  http://blog.cs ...

  4. ios本地文件内容读取，.json .plist 文件读写

    ios本地文件内容读取,.json .plist 文件读写 本地文件.json .plist文件是较为常用的存储本地数据的文件,对这些文件的操作也是一种常用的基础. 本文同时提供初始化变量的比较标准的 ...

  5. H5读取本地文件操作

    H5读取本地文件操作 本文转自:转:http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html感谢大神分享. 常见的语言比如php. ...

  6. FileReader读取本地文件

    FileReader是一种异步读取文件机制,结合input:file可以很方便的读取本地文件. 一.input:type[file] file类型的input会渲染为一个按钮和一段文字.点击按钮可打开 ...

  7. .NET 读取本地文件绑定到GridViewRow

    wjgl.aspx.cs: using System; using System.Collections; using System.Configuration; using System.Data; ...

  8. python 读取本地文件批量插入mysql

    Uin_phone.txt 本地文件内容 有1000条,这里只是展示前几条,供参考 133584752 133584759 133584764 133584773 133584775 13358477 ...

  9. 五种方式让你在java中读取properties文件内容不再是难题

    一.背景 最近,在项目开发的过程中,遇到需要在properties文件中定义一些自定义的变量,以供java程序动态的读取,修改变量,不再需要修改代码的问题.就借此机会把Spring+SpringMVC ...

随机推荐

  1. [转]查看 docker 容器使用的资源

    作者:sparkdev 出处:http://www.cnblogs.com/sparkdev/     在容器的使用过程中,如果能及时的掌握容器使用的系统资源,无论对开发还是运维工作都是非常有益的.幸 ...

  2. 29-ESP8266 SDK开发基础入门篇--编写TCP 客户端程序(Lwip RAW模式,非RTOS版,精简入门)

    https://www.cnblogs.com/yangfengwu/p/11456667.html 由于上一节的源码长时间以后会自动断开,所以再做这一版非RTOS版的,咱直接用lua源码里面别人写的 ...

  3. GoCN每日新闻(2019-10-15)

    GoCN每日新闻(2019-10-15) GoCN每日新闻(2019-10-15) 1. Go Module 存在的意义与解决的问题 https://www.ardanlabs.com/blog/20 ...

  4. 检测算法简介及其原理——fast R-CNN，faster R-CNN，YOLO，SSD，YOLOv2，YOLOv3

    1 引言 深度学习目前已经应用到了各个领域,应用场景大体分为三类:物体识别,目标检测,自然语言处理.本文着重与分析目标检测领域的深度学习方法,对其中的经典模型框架进行深入分析. 目标检测可以理解为是物 ...

  5. dedecms 模板文件不存在,无法解析文档的终极各种解决办法

    dedecms 模板文件不存在,无法解析文档"的终极各种解决办法 方法一:[此对应喜欢把模板文件使用".html"的格式,] /include/arc.archives. ...

  6. JS filter的使用

    定义和用法 filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素. 注意: filter() 不会对空数组进行检测. 注意: filter() 不会改变原始数组 ...

  7. 如何连接到远程windows服务器

    在学习和工作中,有些时候我们需要连接到远程服务器,这里,我来演示如何连接到windows服务器. 1. 首先利用快捷键win+r打开运行,或者在搜索框搜索“运行”,然后在运行框输入mstsc,点击确定 ...

  8. 学习使用Lombok生成代码

    一.介绍 Lombok官网:https://projectlombok.org/ Lombok的功能简单一点说,就是可以帮我们生成一些代码,这些代码并不是在源码(source code)体现出来的,而 ...

  9. PAT 甲级 1080 Graduate Admission (30 分) （简单，结构体排序模拟）

    1080 Graduate Admission (30 分)   It is said that in 2011, there are about 100 graduate schools ready ...

  10. dataTable.NET的search box每輸入一個字母進行一次檢索的問題

    當使用dataTable.NET時,可以通到簡單的setting來添加一個search box進行全表格的檢索. $('#test-listing') .on('order.dt', function ...