<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>html5拖拽上传</title>

    <style type="text/css">

        #div1{

            margin: 0 auto;

            width:200px;

            height:200px;

            background:#ccc;

            color: white;}

        #div1 p{

            position: relative;

            top: 90px;

            left: 50px;

        }

        li{ width:200px; height:200px; margin:5px; float:left; list-style:none;}

        li img{ width:500px;height: auto}

    </style>

    <script type="text/javascript">

        window.onload = function(){

            var oUl = document.getElementById('ul1');

            var oDiv = document.getElementById('div1');

            oDiv.ondragenter = function(){

                this.innerHTML = '可以释放';

            };

            oDiv.ondragover = function(ev){

                ev.preventDefault();

            };

            oDiv.ondragleave = function(){

                this.innerHTML = '请拖拽到此区域';

            };

            oDiv.ondrop = function(ev){

                ev.preventDefault();

                var fs = ev.dataTransfer.files;

                for(var i=0;i<fs.length;i++){

                    var fr = new FileReader();

                    if( fs[i].type.indexOf('image')!=-1 ){

                        fr.readAsDataURL( fs[i] );

                        fr.onload = function(){

                            var oLi = document.createElement('li');

                            var oImg = document.createElement('img');

                            oImg.src = this.result;

                            oLi.appendChild( oImg );

                            oUl.appendChild( oLi );

                        };

                    }

                    else{

                        alert('亲,请拖拽图片格式');

                    }

                }

            };

        };

    </script>

</head>

<body>

<div id="div1"><p>请拖拽到此区域</p></div>

<ul id="ul1"></ul>

</body>
</html>

html5实现拖拽上传的更多相关文章

  1. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  2. [开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件

    前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...

  3. Nodejs express、html5实现拖拽上传

    一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs ...

  4. HTML5文件拖拽上传记录

    JS文件: var FileName = ""; var FileStr = ""; (function () { function $id(id) { ret ...

  5. html5实现拖拽上传头像

    1. 将客户端(本地电脑)中的图片拖到网页中 要点: html5 拖放, FileReader html: <div id="container" ondrop=" ...

  6. HTML5应用之文件拖拽上传

    使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器.本文将结合实例讲解HTML5+jQuery+PHP实现拖拽上传图片的过程,来看下HTML5的魅力吧. H ...

  7. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  8. 图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

    一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...

  9. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

随机推荐

  1. 【python基础】集合方法汇总

    一.定义 用于存储一组无序的不重复的数据 二.特点 1. 集合是无序的 2.集合中的元素是不重复的, 唯一的 3.集合中存储的数据必须是不可变的数据类型 4.集合是可变的数据类型 三.语法 set1 ...

  2. linux下安装MySQL（mariadb）

    MySQL(mariadb) MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可. 开发这个分支的原因之一是:甲骨文公司收购了MySQL后,有将MySQL闭源 ...

  3. Spring5最新完整教程IDEA版【通俗易懂2019.11月】

    1.Maven找包: spring-webmvc spring-jdbc 2.Spring的本质是控制反转,依靠依赖注入来实现.以一个servcie对象为例,即是service暴露注入接口(构造,se ...

  4. 利用Pandas和matplotlib分析我爱我家房租区间频率

    前几天利用python爬取了我爱我家的租房的一些数据,就想着能不能对房租进行一波分析,于是通过书籍和博客等查阅了相关资料,进行了房租的区间分析.不得不说,用python做区间分析比我之前用sql关键字 ...

  5. Java——类的继承、访问控制

    [继承] <1>Java只支持单继承,不支持多继承. <2>继承父类的私有成员变量,只有所有权,没有使用权.   [继承中的构造方法]

  6. Android ListView焦点事件冲突问题与解决

    Android ListView对于单纯列表展示是很好用的,但是一旦牵扯到对listView进行操作就会遇到各种各样的问题.比如保存Checkbox状态与item复用的冲突.遇到可获取焦点的控件比如说 ...

  7. Android - Gradle架构中使用的“.so”库

    Android使用Gradle架构的Android应用,需要对.so库做特殊的处理,因为会找不到,就会导致编译正确,使用错误:常见的使用情况是根据不同的cpu,有不同的库,包括:armeabi,mip ...

  8. android 启动默认的邮件客户端，多附件的问题

    目前开发的app中需要发送邮件,所以需要调用android默认的邮件客户端,并需要添加多个邮件附件,我该通过哪个组件调用默认的客户端?用什么组件来支持多个附件的电子邮件? 是通过下面的哪一个?(Int ...

  9. [洛谷P3938]:斐波那契(fibonacci)（数学）

    题目传送门 题目描述 小$C$养了一些很可爱的兔子.有一天,小$C$突然发现兔子们都是严格按照伟大的数学家斐波那契提出的模型来进行繁衍:一对兔子从出生后第二个月起,每个月刚开始的时候都会产下一对小兔子 ...

  10. 插头DP讲解+[BZOJ1814]:Ural 1519 Formula 1（插头DP）

    1.什么是插头$DP$? 插头$DP$是$CDQ$大佬在$2008$年的论文中提出的,是基于状压$D$P的一种更高级的$DP$多用于处理联通问题(路径问题,简单回路问题,多回路问题,广义回路问题,生成 ...