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. 【原】Spark之机器学习(Python版)(一)——聚类

      kmeans聚类相信大家都已经很熟悉了.在Python里我们用kmeans通常调用Sklearn包(当然自己写也很简单).那么在Spark里能不能也直接使用sklean包呢?目前来说直接使用有点困 ...

  2. 神奇的BFC以及被忽略的东西

    BFC是CSS中一个非常重要的概念,经常用来清除浮动以及处理外边距折叠,但BFC到底是个什么东西却很难准确的表达清楚,国内的相关技术文档基本都不全面,本文的目的就是对BFC的方方面面做个整理,当然未必 ...

  3. 基于bootstrap样式的tree，

    <!doctype html><html lang="zh"><head> <meta charset="UTF-8" ...

  4. 菜鸟git学习

    基础知识: 安装github之后,所有的命令在git shell 中输入. E:\文档\GitHub [master +2 ~0 -0 !]> cd [ToDoList]E:\文档\GitHub ...

  5. ajax的简单介绍

    响应主体,就是服务器给我们返回的结果内容(浏览器里的responsive) 请求主体,是我们给服务器的数据 输入域名发起一次请求,得到的可能是标签,标签可能还要在发一次请求 post怎么发请求:for ...

  6. css-css权威指南学习笔记7

    第11章 表布局 1.border-spacing,单元格边框间距,可以有两个或一个值,两个值前者表示水平间距,后者垂直间距. 2.border-collapse值为collapse时不可设置padd ...

  7. bzoj 1070 [SCOI2007]修车

    最小费用最大流. 将每个技术人员拆成车数个点,技术人员i的第j个点代表技术人员i修的倒数第j辆车. 源点向所有技术人员点连一条容量为1费用为0的边. 所有技术人员点向所有车点连边:技术人员i的第j个点 ...

  8. 使用hexo，如果换了电脑怎么更新博客？

    自己今天想到这个问题,于是去知乎搜索了一番,发现不甚理想.没找到合适的,题目就是知乎原题.只好自己解决了.以下直接把自己的答案粘贴过来 今天我突然想到这个问题,想来参考参考,却发现都不太适合我.首先, ...

  9. writing

    1.作文类型和结构2.作文的四个评分标准3.作文的常用句型4.作文的逻辑观点 大作文分为几类:1.A类(Argument): 这类作文实际上是比较常见的,比如:Caring for children ...

  10. 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...