如下图所示：

代码如下:

<!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. C++ pair用法

    Pair类型概述 pair是一种模板类型,其中包含两个数据值,两个数据的类型可以不同 1.定义(构造): 1 pair<int, double> p1; //使用默认构造函数 2 pair ...

  2. SQL SERVER 2012 使用订阅发布同步数据库

    软件做大了,客户就多了,一个数据库服务器是远远不够的,当有一台数据服务器卦掉,那整个系统就会崩溃,所以必须考虑到数据库的自动同步与备份,当一台数据库服务 器宕机,自然就有用一台数据服务器启动起来保证整 ...

  3. [转]轻松学习Ionic （四） 修改应用图标及添加启动画面（更新官方命令行工具自动生成）

    本文转自:http://blog.csdn.net/zapzqc/article/details/42237935 由于Ionic更新了命令行工具,以后修改应用图标和添加启动画面就简单了,最新方法见最 ...

  4. 边工作边刷题：70天一遍leetcode: day 86

    Word Pattern II 要点: 注意与I的差异,其实题不难,看到这种迷乱的,首先要想到backtrack 1:1 mapping两个条件:p in and str in, or p not i ...

  5. Trie树 & 01Trie

    指针版 #define MAXNUM 26 //定义字典树结构体 typedef struct Trie { bool flag;//从根到此是否为一个单词 Trie *next[MAXNUM]; } ...

  6. Codeforces Round 261 Div.2 E Pashmak and Graph --DAG上的DP

    题意:n个点,m条边,每条边有一个权值,找一条边数最多的边权严格递增的路径,输出路径长度. 解法:先将边权从小到大排序,然后从大到小遍历,dp[u]表示从u出发能够构成的严格递增路径的最大长度. dp ...

  7. JS中的基本运动逻辑思想总结

    总结一下自己今天学习运动的基本思想:‘ [1]对于移动的div,使其在某一个位置停止将其封装成一个函数,仅仅改变speed的正负即可 涉及到问题包括: var time=null; function  ...

  8. C# 改变无边框窗体的尺寸大小

    以下代码为修改窗体尺寸的代码: const int HTLEFT = 10; ; ; ; ; ; const int HTBOTTOMLEFT = 0x10; ; protected override ...

  9. SpringMVC Controller介绍(转）

    SpringMVC Controller 介绍 一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理 ...

  10. C# 杂项

    1,函数访问等级必须高于参数等级,如函数等级是PUBLIC,则参数必须高于等于PUBLIC,若为INTERNAL 则不行.INTERNAL 低于PUBLIC, 用于同一个程序集内引用,PUBLIC则可 ...