思路：监听拖拽区域的 drop 事件，阻止浏览器上的默认拖拽事件

参考:http://www.helloweba.com/view-blog-192.html

例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<img src="" alt="" height="100px" width="100px">

<script>
document.addEventListener("drop",preventDe);
document.addEventListener("dragleave",preventDe);
document.addEventListener("dragover",preventDe);
document.addEventListener("dragenter",preventDe);

function preventDe(e){
e.preventDefault();
}

document.addEventListener("drop",function(e){
e.preventDefault();
var file = e.dataTransfer.files[0];
//file.type; 文件类型
//file.name;文件名
//file.size; 文件大小 btye

var img = document.getElementsByTagName("img")[0];
var dataURL = URL.createObjectURL(file);
img.src = dataURL;

var formData = new FormData();
formData.append("file",file);
// 发送XHR
XHR.send(formData);

})

</script>

</body>
</html>

html5 拖拽文件到页面实现上传的更多相关文章

  1. 拖拽文件实现无刷新上传，支持2G文件

    客户端 用HTML5:jQuery File Upload http://blueimp.github.io/jQuery-File-Upload/basic-plus.html API https: ...

  2. 火狐html5拖拽 弹出新页面解决办法

    今天做项目时,需要实现一个拖拽排序的功能,遂想到了html5的拖拽,便开始查资料,写代码.功夫不复有心人,通过网上资料作参考,排序功能成功实现.谷歌浏览器测试,拖拽平滑,无问题.火狐浏览器测试时,却无 ...

  3. 支持多文件上传，预览，拖拽，基于bootstra的上传插件fileinput 的ajax异步上传

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...

  4. 支持多文件上传，预览，拖拽，基于bootstrap的上传插件fileinput 的ajax异步上传(转载)

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...

  5. js拖拽文件夹上传

    由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...

  6. html5(拖拽3)

    <!DOCTYPE html"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  7. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. html5实现拖拽文件上传

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  9. atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结

    atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结 1. DND的操作流程 1 2. Html5 注 ...

随机推荐

  1. ListNode线性表

    不常用,可以看一下实现原理 namespace UnilateralismChainTable { // 结点类 public class ListNode { public ListNode(int ...

  2. OAuth的一个.NET开源实现

    从编译DotNetOpenAuth中学到的程序集强签名知识 OAuth的一个.NET开源实现,官方网站:http://dotnetopenauth.net/ . 从GitHub签出DotNetOpen ...

  3. SharePoint RBS 安装（集成Office Web Apps）

    前言 本文完全原创,转载请说明出处,希望对大家有用. 本篇博客是个人总结,一方面以便日后查看,另一方面希望能为其他人提供一些便利. 阅读目录 安装RBS 为多个内容数据库开启RBS 正文 目的:在Sh ...

  4. cocos2dx在Eclipse下编译报错:Cannot find module with tag 'CocosDenshion/android' in import path

    在Eclipse下编译cocos2dx项目,报错如下: Android NDK: jni/Android.mk: Cannot find module with tag 'CocosDenshion/ ...

  5. python打包成window可执行程序

    python程序可以通过python hello.py执行,但是需要安装python的解释器,并配置环境变量,打包成exe程序之后可以直接执行. 使用setup工具和py2exe可以做到这一点. 最简 ...

  6. 【Oracle】-【体系结构】-【DBWR】-DBWR进程相关理解

    对DBWR的一些理解 首先从名称上,DBWR全称是Database Writer Process,属于Oracle后台进程的一种,有的地方也叫DBWn,我想这里是出于DBWR进程个数的原因,DBWR进 ...

  7. Windows核心编程学习九：利用内核对象进行线程同步

    注:源码为学习<Windows核心编程>的一些尝试,非原创.若能有助于一二访客,幸甚. 1.程序框架 #include "Queue.h" #include <t ...

  8. Python的下载和安装

    一.下载(官方下载地址) 地址:https://www.python.org/downloads/ 我的是window7系统 二.安装详细过程 在选择安装组件的一步时,勾上所有的组件: 特别要注意选上 ...

  9. 对 Select 的各种操作（JQuery）

    在写表单时,经常要用到select元素,这个元素相较于其他文本框标签而言有不同.最近在写一个页面表单时需要对select进行各种操作,现将其用法收集并总结如下: HTML元素: <select ...

  10. C#中的集合类——ArrayList

    1.  ArrayList与数组 数组的长度不可变,元素的类型单一: ArrayList 实际上相当于一个可变长度的动态数组,由于集合中的元素都是object类型,元素的类型可以有多种了:与数组一样, ...