您的位置：首页 > Web前端 > HTML5

Html5之图片拖放上传

2011-12-07 14:22 218 查看

<!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 浏览器 function 360 list 微软

相关文章推荐

新的分享

章节导航