如下图所示：

代码如下:

<!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. Linux下Mysql安装

    1.下载安装包 首先查看Linux版本: [root@localhost ~]# lsb_release -a LSB Version: :core-4.0-amd64:core-4.0-noarch ...

  2. C++ sort函数

    (一)为什么要用c++标准库里的排序函数 Sort()函数是c++一种排序方法之一,学会了这种方法也打消我学习c++以来使用的冒泡排序和选择排序所带来的执行效率不高的问题!因为它使用的排序方法是类似于 ...

  3. DW Basic Knowledge2

    DW的元数据是指除去数据本身之外的所有信息. 围绕DBMS方面的元数据可以描述为表定义,分区设置,索引视图定义,以及DBMS级安全方面的特权 与授权等内容. 在任何场合下,ODS要么是一个处在OLTP ...

  4. 事件查看器常见ID代码解释

    ID 类型 来   源 代 表 的 意 义 举 例 解 释 信息 Serial 在验证 \Device\Serial1 是否确实是串行口时,系统检测到先进先出方式(fifo).将使用该方式. 错误 W ...

  5. tarjan算法求割点cojs 8

    tarjan求割点:cojs 8. 备用交换机 ★★   输入文件:gd.in   输出文件:gd.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述] n个城市之间有通讯网 ...

  6. POJ2488-A Knight's Journey（DFS+回溯）

    题目链接:http://poj.org/problem?id=2488 A Knight's Journey Time Limit: 1000MS   Memory Limit: 65536K Tot ...

  7. Spring 4.1+　的 JSONP使用

    如今的巨石应用已经越来越不行了,很多互联网在后期都会在用分布式的架构 那么在页面上不同的服务调用不同域名下的json是有问题的 (跨域:不同域名,相同域名但是不同端口) JavaScript规范中提到 ...

  8. Unity3D实现赛车的灯光效果

    车灯的需求 在赛车游戏中,遇到灯光弱的环境,赛车车可以打开前车灯照亮路边及前方,那一定是非常酷! 也见过虚拟现实项目通过Unity模拟汽车车灯的效果,但是我还没有想到好的思路来实现. 我的思路 使用( ...

  9. iOS单例模式(Singleton)写法简析

    单例模式的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类. 1.单例模式的要点: 显然单例模式的要点有三个:一是某个类只能有一个实例: ...

  10. ViewStub的简单解析和使用场景

    ViewStub是Android布局优化中一个很不错的标签/控件,直接继承自View.虽然Android开发人员基本上都听说过,但是真正用的可能不多. ViewStub可以理解成一个非常轻量级的Vie ...