Html5 拖放上传图片

全栈程序员站长

发布于 2022-07-06 09:08:13

2.4K0

发布于 2022-07-06 09:08:13

大家好，又见面了，我是全栈君。

<!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>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/117457.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年1月5，如有侵权请联系 cloudcommunity@tencent.com 删除

java