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. 使用ANTS Performance Profiler&ANTS Memory Profiler工具分析IIS进程内存和CPU占用过高问题

    一.前言 最近一段时间,网站经常出现两个问题: 1.内存占用率一点点增高,直到将服务器内存占满. 2.访问某个页面时,页面响应过慢,CPU居高不下. 初步判断内存一点点增多可能是因为有未释放的资源一直 ...

  2. 【WCF】wcf不支持的返回类型

    亲测不支持 DateView 不支持函数重载 参看:http://www.cnblogs.com/zeroone

  3. Python学习--Python基础语法

    第一个Python程序 交互式编程 交互式编程不需要创建脚本文件,是通过 Python 解释器的交互模式进来编写代码. linux上你只需要在命令行中输入 Python 命令即可启动交互式编程,提示窗 ...

  4. MindManager中发送导图给别的用户的教程

    使用MindManager思维导图的过程中,可以发送当前导图.导图模版或导图主题给其他的Mindjet用户,如果正在进行导图审阅,发送导图时可以使用"供审阅"选项,本文具体为大家讲 ...

  5. iOS持续写文件到本地

    NSString *tempSavePath = [NSString stringWithFormat:@"%@/Documents",kDocumentPath]; NSFile ...

  6. 去掉Win7快捷方式小箭头(win10通用)

    我是一个有强迫症的优化控 , 因为近视的缘故 , 喜欢将桌面图标放大 ,  但是win7快捷方式的小箭头 , 确实不好看 . 用win7魔方之类的软件 , 可以解决这个问题 , 但是有时候重启 ,   ...

  7. 《C编译器剖析》后记

    这本书的序言.后记写的都让我很有感触!mark: 后 记 总有曲终人散时,不知不觉我们已经完成了对UCC 编译器的剖析,一路走来,最深的体会仍然是“纸上得来终觉浅,绝知此事要躬行”.按这个道理,理解U ...

  8. 用Redis实现分布式锁

    Redis有一系列的命令,特点是以NX结尾,NX是Not eXists的缩写,如SETNX命令就应该理解为:SET if Not eXists.这系列的命令非常有用,这里讲使用SETNX来实现分布式锁 ...

  9. pandas read table

    http://pandas.pydata.org/pandas-docs/stable/10min.html import pandas as pd res = pd.read_table(" ...

  10. TeXstudio 编写Latex论文的若干问题

    TeXstudio 编写Latex论文的若干问题解决方案总结       问题1: 如何安装TeXstudio 以及 Texstudio当中的中文字体使用问题.   一.如何安装TeXstudio 很 ...