<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>HTML5 浏览器拖放 | HTML5 Drag and drop</title>

    <style>

        #section{font-family: "Georgia", "微软雅黑", "华文中宋";}

        .container{display:inline-block;min-height:200px;min-width:360px;color:#f30;padding:30px;border:3px solid #ddd;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}

        .preview{max-width:360px;}

        #files-list{position:absolute;top:0;left:500px;}

        #list{width:460px;}

        #list .preview{max-width:250px;}

        #list p{color:#888;font-size:12px;}

        #list .green{color:#09c;}

    </style>

</head>

<body>  

    <div id="section">

        <p>把你的图片拖到以下的容器内：</p>  

        <div id="container" class="container">  

        </div>

        <div id ="files-list">

            <p>已经拖进过来的文件：</p>

            <ul id="list"></ul>

        </div>

    </div>  

    <script>  

    if (window.FileReader) {  

        var list = document.getElementById('list'),

            cnt = document.getElementById('container');  

        // 推断是否图片

        function isImage(type) {

            switch (type) {

            case 'image/jpeg':

            case 'image/png':

            case 'image/gif':

            case 'image/bmp':

            case 'image/jpg':

                return true;

            default:

                return false;

            }

        }  

        // 处理拖放文件列表

        function handleFileSelect(evt) {

            evt.stopPropagation();

            evt.preventDefault();  

            var files = evt.dataTransfer.files;  

            for (var i = 0, f; f = files[i]; i++) {  

                var t = f.type ? f.type : 'n/a',

                    reader = new FileReader(),

                    looks = function (f, img) {

                        list.innerHTML += '<li><strong>' + f.name + '</strong> (' + t +

                            ') - ' + f.size + ' bytes<p>' + img + '</p></li>';

                        cnt.innerHTML = img;

                    },

                    isImg = isImage(t),

                    img;  

                // 处理得到的图片

                if (isImg) {

                    reader.onload = (function (theFile) {

                        return function (e) {

                            img = '<img class="preview" src="' + e.target.result + '" title="' + theFile.name + '"/>';

                            looks(theFile, img);

                        };

                    })(f)

                    reader.readAsDataURL(f);

                } else {

                    img = '"o((>ω< ))o"。你传进来的不是图片！！';

                    looks(f, img);

                }  

            }  

        }  

        // 处理插入拖出效果

        function handleDragEnter(evt){ this.setAttribute('style', 'border-style:dashed;'); }

        function handleDragLeave(evt){ this.setAttribute('style', ''); }  

        // 处理文件拖入事件，防止浏览器默认事件带来的重定向

        function handleDragOver(evt) {

            evt.stopPropagation();

            evt.preventDefault();

        }  

        cnt.addEventListener('dragenter', handleDragEnter, false);

        cnt.addEventListener('dragover', handleDragOver, false);

        cnt.addEventListener('drop', handleFileSelect, false);

        cnt.addEventListener('dragleave', handleDragLeave, false);  

    } else {

        document.getElementById('section').innerHTML = '你的浏览器不支持啊，同学';

    }  

    </script>  

</body>

</html>

版权声明：本文博客原创文章。博客，未经同意，不得转载。

Html5 拖放上传图片的更多相关文章

  1. HTML5拖放（drag and drop）与plupload的懒人上传

    HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...

  2. HTML5 拖放

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 I ...

  3. HTML5拖放API

    拖放事件事件提供了拖放可以控制几乎所有方面的拖放操作.棘手的部分是确定每个事件触发:在拖项目火:别人火下降的目标.拖动项时,以下事件(按照这个顺序): 拖曳开始拖dragend此刻你把鼠标按钮和开始移 ...

  4. HTML5拖放

    HTML5拖放 <!doctype html> <html> <head> <meta charset="UTF-8"> <t ...

  5. HTML5 拖放及排序的简单实现

    HTML5 拖放及排序的简单实现 之前写过个类似的例子,看这里. 但想再深入一步,希望能通过拖放,来交换二个元素的位置.最好有应用到手机平台上. 作了个简单的例子,在手机上测试的时候不成功..查了好多 ...

  6. HTML5 拖放（Drag 和 Drop）功能开发——基础实战

    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

  7. 【Demo】HTML5拖放--简单demo

    用HTML5拖放功能编写一个简单的拖放Demo 单次拖放demo 效果: ------拖放前------- ------拖放后-------  实现代码: <!DOCTYPE html> ...

  8. HTML5: HTML5 拖放

    ylbtech-HTML5: HTML5 拖放 1.返回顶部 1. HTML5 拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分.   将 RUNOOB.C ...

  9. html5 拖放学习

    html5拖放 需要有可拖放元素,可放置的位置(可多个),就像是一个苹果,多个箱子,苹果可以在箱子间来回放置,同样元素也可在多个可放置位置间来回拖放. 如果只有一个位置,元素只可被从原位置托放置唯一目 ...

随机推荐

  1. VBoxGuestAdditions.iso下载地址

    http://download.virtualbox.org/virtualbox/4.1.2/VBoxGuestAdditions_4.1.2.iso 其它版本号可依次判断..

  2. GDAL切割重采样遥感图像

    一个小测试程序开发全过程实录,完全新手入门级的实例,如果你还在为处理大影像而发愁,来试试这个称手的工具吧. Imagec 开发日记 2013-6-25 需求: 影像数据切割,重采样 数据切割的要求是简 ...

  3. 局部权重线性回归(Locally weighted linear regression)

    在线性回归中,因为对參数个数选择的问题是在问题求解之前已经确定好的,因此參数的个数不能非常好的确定,假设參数个数过少可能拟合度不好,产生欠拟合(underfitting)问题,或者參数过多,使得函数过 ...

  4. 关于Velocity加减法等四则运算的迷思

    曾今有一个FreeMarker摆在我面前. 我没有好好珍惜, 遇到了Velocity我才想起失去的美好... 需求是把PC网页点击. 手机网页点击.App点击相加得到总点击量显示出来: $articl ...

  5. Xcode6在10.9.4上面crash解决

    具体请看我的evernote 这里: 在10.9.4系统上面直接安装xcode6的beta3.和平时一样, 1.将beta3拖拽到application文件夹中. 2.等待copy完毕,执行xcode ...

  6. windows phone 7 定位（获取经纬度）,然后找到经纬度所在的位置(城市信息)

    原文:windows phone 7 定位(获取经纬度),然后找到经纬度所在的位置(城市信息) 前几天做项目用到, 代码贴给大家. /// <summary> /// 获取当前位置的经纬度 ...

  7. Web监听器导图详解(转)

    阅读目录 Web监听器 监听器的分类 Servlet版本与Tomcat版本 getAttribute与getParameter的区别 参考 监听器是JAVA Web开发中很重要的内容,其中涉及到的知识 ...

  8. Spark1.0.0 属性配置

    1:Spark1.0.0属性配置方式       Spark属性提供了大部分应用程序的控制项,而且能够单独为每一个应用程序进行配置.       在Spark1.0.0提供了3种方式的属性配置: Sp ...

  9. 通过openssh远程登录时的延迟问题解决

    Linux下的ssh 服务器一般用的都是open-ssh,可是发现有些时候通过ssh连接服务器时总会有大概10秒钟左右的延迟. 一开始以为是openssh的安全策略,防止端口扫描,后来发现自己想多了. ...

  10. Qt中截图功能的实现

    提要 需求:载入一张图片并显示,能够放大缩小,能够截取图片的某个矩形并保存. 原以为蛮简单的一个功能,事实上还是有点小复杂. 最简单Qt图片浏览器能够參考Qt自带的Demo:Image Viewer ...