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. 单例模式中用volatile和synchronized来满足双重检查锁机制

    背景:我们在实现单例模式的时候往往会忽略掉多线程的情况,就是写的代码在单线程的情况下是没问题的,但是一碰到多个线程的时候,由于代码没写好,就会引发很多问题,而且这些问题都是很隐蔽和很难排查的. 例子1 ...

  2. FineUI（专业版）公测版发布（这速度，真TM快！）

    经过近一年的筹备.编码和测试,FineUI(专业版)公测版终于和大家见面了!现在就来体验一下专业版飞一般的速度吧:http://fineui.com/demo_pro/FineUI(专业版)首页:ht ...

  3. C++知识回顾（二）——名称空间

    随着工程的增大,名称相互冲突的肯能性增加,使用多个厂商的类库时,可能导致名称冲突.为了解决这些问题,需要用到名称空间. 为了将代码加入名称空间,可以使用namespae将其包含,例如,编写一段代码,其 ...

  4. [CI] 使用Jenkins自动编译部署web应用

    写在前面 初步接触持续集成自动化过程,本篇主要介绍基于Jenkins实现持续集成的方式,通过案例介绍线上自动编译及部署的配置过程 持续集成 持续集成是一种软件开发实践,即团队开发成员经常集成它们的工作 ...

  5. poj2217

    Secretary Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 1257   Accepted: 515 Descript ...

  6. neo4j-访问提示No authorization header supplied.

    在使用java连接neo4j数据库时 public static void main(String[] args) throws SQLException { Connection con = Dri ...

  7. Python后台分页删除编辑查询

    「POST 数据」通常指 POST 时 body 中的数据.而 QueryString (URL)中也有可以带参数(通常是 GET 时的参数).如果 POST 时同时存在 QueryString 和 ...

  8. c# 判断访问来源是否来自手机

    public Boolean IsMobileDevice() { string[] mobileAgents =new []{ "iphone", "android&q ...

  9. HTML学习笔记——标签

    最近开始学习前端的一些知识,了解了一下Html和CSS. HTML:是网页内容的载体,它负责的是网页的内涵,也就是网页要呈现的内容,包括了图片,视频还有文字.是网页要加载的东西: CSS:是样式表现, ...

  10. 通过维基API实现维基百科查询功能

    通过英文维基的免费API,可以实现对维基百科的搜索查询或者标题全文查询等,尝试了一下通过title实现全文查询,返回的结果是wikitext格式,暂时不知道该如何应用,所以仅实现了查询功能,可以返回最 ...