如下图所示：

代码如下:

<!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. xamarin.android 图片高斯模糊效果

    代码如下: private static float BITMAP_SCALE = 0.1f; private static float BLUR_RADIUS = 12.0f; public sta ...

  2. 【Ext.Net学习笔记】04：Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法

    之前的几篇文章都是介绍Ext.Net较为基础的东西,今天的这一篇将介绍数据的一些用法,包括XTemplate绑定数据.Store(Modal.Proxy).ComboBox的用法等. XTemplat ...

  3. 解决linux部署项目后，第一次访问初始化数据源的时候很慢的问题

    先说一下场景 测试环境是linux - centos6.5,项目是分布式的,分别搭建到linux上 数据货使用的是阿里巴巴数据源 每次重启后的第一次访问会比较慢,查看日志发现 卡在这个地方 ...{d ...

  4. WIN7系统自带截图工具SnippingTool

    在无网络的情况下,无QQ情况下,如何截图?以及如何设置快捷键? 方法 首先,我们在“开始”菜单最上面找到它,如图: 找不到也没关系 C:\Windows\system32\SnippingTool.e ...

  5. canvas仿屏幕保护运动线条

    canvas是H5中及其重要的一个新标签,它得出现不仅让前端做图形图表功能变得异常强大,还用极强的性能丰富前端渲染页面的能力. Life is not a problem to be solved, ...

  6. 【原创】有关Silverlight中“DataGrid中单元格动态绑定ComboBox单击时数据项莫名被清除 ”的解决方案及思路。

    今天上班遇到一个很古怪的问题,搞了半天愣是没找到原因.是这样的,在Datagrid中有绑定一个ComboBox列,其不包含在 model数据中,而是单独在LoadingRow事件中去 从数据库拿数据绑 ...

  7. performSelector:withObject:afterDelay: 精要概览（持续更新）

    - (void)performSelector:(SEL)aSelector withObject:(id)anArgument afterDelay:(NSTimeInterval)delay; - ...

  8. PyQT制作视频播放器

    Python应用03 使用PyQT制作视频播放器   作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁任何形式转载. 最近研究了Python的两个GUI包,Tki ...

  9. Linux Linux程序练习十二（select实现QQ群聊）

    //头文件--helper.h #ifndef _vzhang #define _vzhang #ifdef __cplusplus extern "C" { #endif #de ...

  10. [matlab]改变矩阵的大小并保存到txt文件

    要完成的任务是,加载一个保存在txt文件中的矩阵, 并把它扩大10倍,并且要再次保存回去 %加载txt文件 >load('Matrix.txt'); %扩大10倍 repmat(Matrix,r ...