<!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. 洛谷 P4281 [AHOI2008] 紧急集合 题解

    挺好的一道题,本身不难,就把求两个点的LCA变为求三个点两两求LCA,不重合的点才是最优解.值得一提的是,最后对答案的处理运用差分的思想:假设两点 一点深度为d1,另一点 深度为d2,它们LCA深度为 ...

  2. 微信小程序路由带参

    通过url带参传递 wxml <navigator url="../user/user?id={{item.id}}&name={{item.name}}">点 ...

  3. 2019SDSC夏令营游记

    Day 1 2019.7.22 晴 第一天夏令营,是在一所大学举办的. 到之前的我好兴奋,要提前看一下大学到底是什么样的. 聊了一上午的天 坐了一上午的公交终于到了目的地,下午很自由,自己在宿舍里面休 ...

  4. 洛谷P2659 美丽的序列

    题目 该题目可以用辅助数组l[i], r[i]来指向以data[i]为最小值的左端点和右端点.然后最后枚举每个data[i]寻找每个data[i]的美丽值的最大值. 然后辅助数组可以用单调栈求出. # ...

  5. 原创：协同过滤之ALS

    推荐系统的算法,在上个世纪90年代成型,最早应用于UserCF,基于用户的协同过滤算法,标志着推荐系统的形成.首先,要明白以下几个理论:①长尾理论②评判推荐系统的指标.之所以需要推荐系统,是要挖掘冷门 ...

  6. 开源一个golang小程序商城后台系统（moshopserver）

    开源一个golang小程序商城后台(moshopserver) golang和c/c++比起来是一门新的语言,一直想学,网上搜集了一些资料,有些人说很容易上手,确实是这样,和C/C++比起来,少了很多 ...

  7. java 中利用反射机制获取和设置实体类的属性值

    摘要: 在java编程中,我们经常不知道传入自己方法中的实体类中到底有哪些方法,或者,我们需要根据用户传入的不同的属性来给对象设置不同的属性值,那么,java自带的反射机制可以很方便的达到这种目的,同 ...

  8. TCP连接关闭总结

    由于涉及面太广,只作简单整理,有兴趣的可参考<UNIX Networking Programming>volum 1, Section 5.7, 5.12, 5.14, 5.15, 6.6 ...

  9. vs2015编译OBS-Studio

    编译之前的准备: 系统win10 QT5.7.0 VS2015 CMake 3.13.4 obs vs2015环境依赖包:dependencies2015 obs-studio 24.0 ====== ...

  10. pg_escape_string专用于转义数据库敏感字符

    (PHP 4 >= 4.2.0, PHP 5) pg_escape_string — 转义 text/char 类型的字符串 说明 string pg_escape_string ( strin ...