HTML代码请把文件拖到下面的框里
触发drop事件
读取拖放的文件常用情况：
结合XMLHttpRequest和拖放文件实现上传
查看和管理本地文件和图片

<!DOCTYPE HTML>

<html>

<head>

    <style type="text/css">

        #dropTarget {width: 200px; height: 200px; background: #ccc; border: 1px solid #999;}

        </style>

</head>

<body>

<p>请把文件拖到下面的框里：</p>

<div id="dropTarget"></div>

<div id="output"></div>

<script type="text/javascript">

        function dragHandle(event)

            {

                var info = "", outputEle = document.getElementById("output"),

                files, i, len; event.preventDefault();

                if(event.type == "drop")

                {

                    files = event.dataTransfer.files;

                    i = 0;

                    len = files.length;

                    while(i < len){

                        info += files[i].name + "( " + files[i].type + ", " + files[i].size + " bytes) <br>"; i++;

                    }

                    outputEle.innerHTML = info;

                }

            }

            var dropTargetEle = document.getElementById("dropTarget");

            dropTargetEle.addEventListener("dragenter", dragHandle, false);

            dropTargetEle.addEventListener("dragover", dragHandle, false);

            dropTargetEle.addEventListener("drop", dragHandle, false);

</script>

</body>

</html>

HTML 接收本地文件的更多相关文章

  1. 头疼：为什么chrome不能访问本地文件（带--disable-web-security --allow-file-access-from-files ）

    如题,寻求帮助! chrome 带参数启动 --disable-web-security  --allow-file-access-from-files 照理应该可以加载本地文件,找遍google和英 ...

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

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

  3. outlook邮箱邮件与企业邮箱同步(outlook本地文件夹邮件，web邮箱里没有)

    用惯了outlook2010, 问题:今天将邮件放到自定义文件夹后,发现在web邮箱中看不到邮件了.不能同步到企业邮箱. 解决忙了一天,才知道是账户类型问题,pop3类型,只下载不上传.所以outlo ...

  4. django请求接收及文件上传

    在写后端交互页面的时候常常会遇到接收来自前端页面请求的情况,例如 在写注册页面的时候,会提交一些页面信息,这时需要分三种情况讨论 第一种,接收单项信息: v = request.POST.getlis ...

  5. 安卓Q | 诸多本地文件找不到？应用文件存储空间沙箱化适配指导

    上期我们针对Android Q 版本中对设备存储空间进行的限制.新特性变更引发的兼容性问题及原因分析推出了<安卓 Q | 8大场景全面解析应用存储沙箱化>文章,本期文章我们将手把手指导各位 ...

  6. HTML5 本地文件操作之FileSystemAPI整理（二）

    一.文件目录操作 1.DirectoryEntry对象 属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...

  7. php发送 与接收流文件

    PHP 发送与接收流文件 sendStreamFile.php 把文件以流的形式发送 receiveStreamFile.php 接收流文件并保存到本地 sendStreamFile.php < ...

  8. 修改http请求文件为本地文件的一种方法：hook InternetReadFile 和 HttpOpenRequest

    今天没事的时候学了一下easyhook来hook本进程API,确实很简单就能hook.然后想到这个问题:替换webbrowser请求的文件为本地文件.有什么用就不说了,都懂.因为没有用API写过htt ...

  9. ubuntu服务器与本地文件传输

    ubuntu SSH 连接.远程上传下载文件 博客分类: Ubuntu   安装 SSH(Secure Shell) 服务以提供远程管理服务 sudo apt-get install ssh SSH ...

随机推荐

  1. [LeetCode] Hamming Distance 汉明距离

    The Hamming distance between two integers is the number of positions at which the corresponding bits ...

  2. [LeetCode] Assign Cookies 分点心

    Assume you are an awesome parent and want to give your children some cookies. But, you should give e ...

  3. [LeetCode] Longest Substring with At Most Two Distinct Characters 最多有两个不同字符的最长子串

    Given a string S, find the length of the longest substring T that contains at most two distinct char ...

  4. .net(C#)中this关键字

    使用this关键字引用成员变量使用this关键字在自身构造方法内部引用其它构造方法使用this关键字代表自身类的对象使用this关键字引用成员方法 在一个类的方法或构造方法内部,可以使用"t ...

  5. DeepMind背后的人工智能：深度学习原理初探

    去年11月,一篇名为<Playing Atari with Deep Reinforcement Learning>的文章被初创人工智能公司DeepMind的员工上传到了arXiv网站.两 ...

  6. 预览github上的html页面

    譬如有个项目:https://github.com/wozhizui/ife/tree/DevTogether/task19 里面有html的示例文件index.html 我们点击进去看到的是一堆代码 ...

  7. Scala元组

    object TupleTest { def basic(firstName: String, lastName: String, age: Int): (String, String, Int) = ...

  8. OI省选算法汇总

    copy from hzwer @http://hzwer.com/1234.html 侵删 1.1 基本数据结构 1. 数组 2. 链表,双向链表 3. 队列,单调队列,双端队列 4. 栈,单调栈 ...

  9. c#上级目录

    本文实例讲述了C#的path.GetFullPath 获取上级目录实现方法,分享给大家供大家参考.具体实现方法如下: string path = new directoryinfo("../ ...

  10. ngrok反向隧道--获取内网IP

    ngrok反向隧道 前情提要:小明与小白各有一台主机,两台主机在同一内网,小明想直接通过内网ssh到小白的主机上.但是小白的ip地址会不断的变化,而小明不想每次都要麻烦小白查看ip.于是小明催生了一个 ...