1. <html>
    <head>
  2.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3.     <title>html5拖拽上传</title>
  4.     <style type="text/css">
  5.         #div1{
  6.             margin: 0 auto;
  7.             width:200px;
  8.             height:200px;
  9.             background:#ccc;
  10.             color: white;}
  11.         #div1 p{
  12.             position: relative;
  13.             top: 90px;
  14.             left: 50px;
  15.         }
  16.         li{ width:200px; height:200px; margin:5px; float:left; list-style:none;}
  17.         li img{ width:500px;height: auto}
  18.     </style>
  19.     <script type="text/javascript">
  20.  
  21.         window.onload = function(){
  22.  
  23.             var oUl = document.getElementById('ul1');
  24.             var oDiv = document.getElementById('div1');
  25.  
  26.             oDiv.ondragenter = function(){
  27.                 this.innerHTML = '可以释放';
  28.             };
  29.  
  30.             oDiv.ondragover = function(ev){
  31.                 ev.preventDefault();
  32.             };
  33.  
  34.             oDiv.ondragleave = function(){
  35.                 this.innerHTML = '请拖拽到此区域';
  36.             };
  37.  
  38.             oDiv.ondrop = function(ev){
  39.  
  40.                 ev.preventDefault();
  41.  
  42.                 var fs = ev.dataTransfer.files;
  43.  
  44.                 for(var i=0;i<fs.length;i++){
  45.  
  46.                     var fr = new FileReader();
  47.  
  48.                     if( fs[i].type.indexOf('image')!=-1 ){
  49.  
  50.                         fr.readAsDataURL( fs[i] );
  51.  
  52.                         fr.onload = function(){
  53.                             var oLi = document.createElement('li');
  54.                             var oImg = document.createElement('img');
  55.                             oImg.src = this.result;
  56.                             oLi.appendChild( oImg );
  57.                             oUl.appendChild( oLi );
  58.                         };
  59.                     }
  60.                     else{
  61.                         alert('亲,请拖拽图片格式');
  62.                     }
  63.  
  64.                 }
  65.  
  66.             };
  67.  
  68.         };
  69.     </script>
  70. </head>
  71. <body>
  72. <div id="div1"><p>请拖拽到此区域</p></div>
  73. <ul id="ul1"></ul>
  74. </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. SpringBoot---Kafka

    1.实战 <!-- https://mvnrepository.com/artifact/org.apache.kafka/kafka --> <dependency> < ...

  2. Linux学习-NFS服务

    一.NFS服务相关介绍 1.NFS简介 NFS (Network File System) 网络文件系统,基于内核的文件系统.Sun公司开发,通过使用NFS,用户和程序可以像访问本地文件一样访问远端系 ...

  3. 【bzoj1324】Exca王者之剑（8-9 方格取数问题）

    *题目描述: 在一个有m*n (m,n<=100)个方格的棋盘中,每个方格中有一个正整数.现要从方格中取数,使任意2 个数所在方格没有公共边,且取出的数的总和最大.试设计一个满足要求的取数算法, ...

  4. int转字符串 stringstream

    1. 设定一个任意数字串,数出这个数中的偶数个数,奇数个数,及这个数中所包含的所有位数的总数,将答案按 “偶-奇-总” 的位序,排出得到新数.重复进行,最后会得到 123. #include<i ...

  5. 深入理解Spring（一）：初识Spring

    深入理解Spring(一):初识Spring 一. Spring介绍        Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnso ...

  6. 「BalticOI 2011」Switch the Lamp On

    Casper is designing an electronic circuit on a \(N \times M\) rectangular grid plate. There are \(N ...

  7. 谷歌 AXURE RP EXTENSION拓展问题

    我们打开某种文件页面是 会提示我们下载 AXURE RP EXTENSION 拓展. 其实我们可以直接用ie浏览器打开即可,不用下载

  8. windows编程，消息函数中拦截消息的问题

    很多年没有写windows窗口程序了,今天自制基于vulkan的程序时遇到了一些问题,部分代码如下: LRESULT CALLBACK XWindow::WndProc(HWND hWnd, UINT ...

  9. PHP图片处理

    开启GD扩展(php_gd2.dll) 创建画布 画布:一种资源型数据,可以操作的图像资源. 创建新画布(新建) ImageCreate(宽,高);创建基于调色板的画布. imageCreateTru ...

  10. 添加环境变量（path）

    使用命令提示符((cmd)(批处理)(Batch)(.bat))添加环境变量 永久环境变量 命令提示符下修改 ==注意:要使用管理员身份运行cmd== set PATH=%PATH%;要添加的路径 r ...