如下图所示：

代码如下:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

    #div1{width:200px;height:200px;background:red;}

    </style>

    <script type="text/javascript">

    window.onload=function(){

     var div1=document.getElementById("div1");

     div1.ondragenter=function(){

       this.innerHTML="可以释放了";

     }

     div1.ondragover=function(ev){

       ev.preventDefault();

     }

     div1.ondragleave=function(){

     this.innerHTML="将文件拖拽到此区域";

     }

     div1.ondrop=function(ev){

       ev.preventDefault();

       var files=ev.dataTransfer.files;

       var fd=new FileReader();

       if(files[0].type.indexOf('image')!=-1){

       fd.readAsDataURL(files[0]);

       var ul1=document.getElementById("ul1");

       fd.onload=function(){

         var li1=document.createElement("li");

         var img1=document.createElement("img");

         img1.src=this.result;

         li1.appendChild(img1);

         ul1.appendChild(li1);

       }

       }else{alert("请选择图片上传");}

      }

      // alert(files.length);

     }

    </script>

</head>

<body>

<div id="div1">将文件拖拽到此区域</div>

<ul id="ul1">

</ul>

</body>

</html>

HTML5——将图片拖拽上传的更多相关文章

  1. HTML5多图片拖拽上传带进度条

    前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...

  2. html5原生js拖拽上传（golang版）

    一次只能传一个文件,需在main.go同级目录中建一个upload文件夹 main.go package main import ( "fmt" "io" &q ...

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

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

  4. h5图片上传预览与拖拽上传

    图片上传: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

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

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

  6. [python][flask] Flask 图片上传与下载例子（支持漂亮的拖拽上传）

    目录 1.效果预览 2.新增逻辑概览 3.tuchuang.py 逻辑介绍 3.1 图片上传 3.2 图片合法检查 3.3 图片下载 4.__init__.py 逻辑介绍 5.upload.html ...

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

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

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

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

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

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

随机推荐

  1. 使用LVS实现负载平衡之Windows Server 2008配置

    LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国国内最早出现的自由软件项目之一.承载于 II ...

  2. Zbrush 4R7 P3中各类模型怎么快速隐藏

    在ZBrush®软件中除了遮罩功能可以对模型局部进行编辑外,我们还可以通过显示和隐藏来对模型的局部进行控制. 查看更多内容请直接前往:http://www.zbrushcn.com/jichu/xia ...

  3. 平摊分析 Amortized Analysis ------geeksforgeeks翻译

    当偶尔一切操作很花的时间很慢,而大多数操作的时间都很快的时候,平摊分析的方法就很很好用了.在平摊分析中,我们分析一串操作并且可以得到最坏情况下的平均时间复杂度.例如hash table, disjoi ...

  4. 边工作边刷题：70天一遍leetcode: day 75-1

    Shortest Word Distance I/II/III 要点:系列题最重要的是记清题,重点是题目本身的变化和解法之间的关联. I https://repl.it/CqPf 这题的一般规律从左到 ...

  5. Matlab手册翻译

    MATLAB 语言是一种工程语言,语法很像 VB 和 C,比 R 语言容易学,你知道 R 语言的语法有多糟糕么.同样,相对于 Python,MATLAB 的优点是天生为了算而算,数与数之间的运算就是矩 ...

  6. Unity脚本生命周期

    前言 说到生命周期,影响最深刻的是,在接触Java的JSF组件时,JSF组件的五大生命周期,全要默写出来,嘿嘿…… 总结这两天在写小怪和掉落的糖葫芦时,老是遇到GameObject未销毁,一直存在场景 ...

  7. JMeter学习（五）检查点

    JMeter也有像LR中的检查点,本篇就来介绍下JMeter的检查点如何去实现. JMeter里面的检查点通过添加断言来完成. 检查点:上一章讲到,我们对用户名和密码进行了参数化,那么怎样来判断jme ...

  8. 博友的 编写高质量代码 改善java程序的151个建议

    编写高质量代码 改善java程序的151个建议 http://www.cnblogs.com/selene/category/876189.html

  9. 关于软件测试人员能力模型的建立(from知乎)

    转自: http://www.zhihu.com/question/20254092 测试思维方面:1.测试基础理论(测试流程.测试的基础知识)2.测试用例设计方法论(黑盒.白盒)3.软件质量体系(建 ...

  10. 在Centos5下安装GraphicsMagick

    安装GraphicsMagick的流水账: 安装参照的http://www.graphicsmagick.org/INSTALL-unix.html 解压 /home/milton/GraphicsM ...