一步步用HTML5动手写个图片拖拽上传预览组件

详情参考:一步步用HTML5动手写个图片上传预览组件
H5中拖拽事件有:
[ - ] DragDrop:拖放完成,也就是鼠标拖入对象并在拖放区域释放。
[ - ] DragEnter :拖放进入,也就是鼠标拖放对象进入拖放区域。
[ - ] DragLeave:离开拖放区域。
[ - ] DragOver :拖放对象悬浮于拖放区域,在拖放区域内移动时多次触发。

1.拖拽文件获取文件信息

示例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

        <style>
            .example {
                padding: 10px;
                border: 1px solid #ccc;
            }
            
            #drop_zone {
                border: 2px dashed #bbb;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                padding: 25px;
                text-align: center;
                font: 20pt bold 'Vollkorn';
                color: #bbb;
            }
        </style>
    </head>

    <body>
        <div class="example">
            <div id="drop_zone">将文件拖放到此处</div>
            <output id="list"></output>
        </div>
        <script>
            function handleFileSelect(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                var files = evt.dataTransfer.files;//获取文件集
                var output = [];
                for(var i = 0, f; f = files[i]; i++) {
                    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                        f.size, ' bytes, last modified: ',
                        f.lastModifiedDate.toLocaleDateString(), '</li>');
                }
                document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
            }

            function handleDragOver(evt) {
                evt.stopPropagation();
                evt.preventDefault();
                evt.dataTransfer.dropEffect = 'copy';
            }

            var dropZone = document.getElementById('drop_zone');
            dropZone.addEventListener('dragover', handleDragOver, false);
            dropZone.addEventListener('drop', handleFileSelect, false);

            //body中阻止 拖拽事件防止拖拽错误
            document.body.addEventListener('dragover', function(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                return false;
            }, false);
            document.body.addEventListener('drop', function(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                return false; 
            }, false);
        </script>
    </body> 
</html>

2.限制文件大小与文件格式

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

        <style>
            .example {
                padding: 10px;
                border: 1px solid #ccc;
            }
            
            #drop_zone {
                border: 2px dashed #bbb;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                padding: 25px;
                text-align: center;
                font: 20pt bold 'Vollkorn';
                color: #bbb;
            }
        </style>
    </head>

    <body>
        <div class="example">
            <div id="drop_zone">将文件拖放到此处</div>
            <output id="list"></output>
        </div>
        <script>
            function handleFileSelect(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                var files = evt.dataTransfer.files;//获取文件集
                var output = [];
                for(var i = 0, f; f = files[i]; i++) {
                      if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){//<===这里
                            output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                            f.size, ' bytes, last modified: ',
                            f.lastModifiedDate.toLocaleDateString(), '</li>');
                    }
                }
                document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
            }

            function handleDragOver(evt) {
                evt.stopPropagation();
                evt.preventDefault();
                evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
            }

            var dropZone = document.getElementById('drop_zone');
            dropZone.addEventListener('dragover', handleDragOver, false);
            dropZone.addEventListener('drop', handleFileSelect, false);

            //body中阻止 拖拽事件防止拖拽错误
            document.body.addEventListener('dragover', function(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                return false;
            }, false);
            document.body.addEventListener('drop', function(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                return false; 
            }, false);
        </script>
    </body> 
</html>

3.显示缩略图与动态增删效果

示例

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>简易上传预览</title> 
        <style type="text/css">
            #drop_zone {
                display: block;
                border: 2px dashed #BBB;
                padding: 25px 5px;
                text-align: center;
                font-size: 20pt;
                color: #BBB;
                border-radius: 5px;
            }
            
            #drop_zone.hovering {
                -webkit-box-shadow: inset 0px 0px 50px #BBB;
                -moz-box-shadow: inset 0px 0px 50px #BBB;
                -o-box-shadow: inset 0px 0px 50px #BBB;
                box-shadow: inset 0px 0px 50px #BBB;
            }
            
            #file-upload-box {
                margin: 40px 25px;
                padding: 10px;
                border: 1px solid #BBB;
            }
            
            #description:first-line {
                margin-left: 42px;
            }
            
            #output_area {
                text-align: center;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                position: absolute;
                left: 0;
                right: 0;
                top: 106px;
                overflow: auto;
                bottom: 0;
            }
            
            #file-upload-box {
                position: absolute;
                top: 45px;
                bottom: 45px;
                left: 20px;
                right: 20px;
                background-color: #fff;
                overflow: auto;
            }
            
            .upload-img-itme {
                color: #333;
                width: 170px;
                margin: 10px;
                color: #333;
                flex: 1;
            }
            
            .upload-img-itme a.rimg-name {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 5px;
                display: block;
            }
            
            .d-image {
                box-shadow: 0 0 10px #bbb;
                border-radius: 20px;
                overflow: hidden;
                width: 170px;
                height: 170px;
                display: inline-block;
                z-index: 344;
                background-color: #cecece;
                position: relative;
                transition: all 1s;
                -moz-transition: all 1s;
                -webkit-transition: all 1s;
                -o-transition: all 1s;
                cursor: pointer;
            }
            
            .d-image:hover:after {
                display: block;
            }
            
            .d-image:after {
                content: "×";
                font-size: 44px;
                text-align: center;
                width: 50%;
                margin: auto;
                position: absolute;
                top: 50%;
                display: none;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
            
            .d-image:hover> img {
                -webkit-filter: blur(5px);
                -moz-filter: blur(5px);
                -ms-filter: blur(5px);
                filter: blur(5px);
            }
        </style>
    </head>

    <body ondrop="return false" ondragover="return false">
        <!--防止拖拽跳转-->
        <div id="file-upload">
            <div id="file-upload-box">
                <label id="drop_zone">将文件拖拽到这里或点击这里
                    <input multiple id="files" type="file" hidden="hidden" style="display: none;" name="files[]" />
                </label>
                <div id="output_area"></div>
            </div>
        </div>
        <div style="position: absolute; bottom: 10px; left: 40px; right: 40px;text-align: center;">
            <button onclick="demo.ImageLs=[];reloadDiv();" style="padding: 5px 10px; background: #fff; border: 1px #000 solid; cursor: pointer;">清空</button>
            <button onclick="alert('上传')" style="padding: 5px 10px; background: #fff; border: 1px #000 solid; cursor: pointer;">上传</button>
        </div>
        <script>
            var ImgType = ["gif", "jpeg", "jpg", "bmp", "png", "ico", "webp"];

            function getFileUrl(fileObj) {
                return window.URL.createObjectURL(fileObj);
            }

            //拖拽功能
            var output = document.getElementById('output_area');
            var dropZone = document.getElementById('drop_zone');
            if(!(('draggable' in dropZone) && ('ondragenter' in dropZone) &&
                    ('ondragleave' in dropZone) && ('ondragover' in dropZone) &&
                    window.File)) {
                document.getElementById('error_msg').style.display = 'block';
                document.getElementById('demo_area').style.display = 'none';
            } else {

                function handleFileDragEnter(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    this.classList.add('hovering');
                }

                function handleFileDragLeave(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    this.classList.remove('hovering');
                }

                function handleFileDragOver(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    e.dataTransfer.dropEffect = 'copy';
                }

                function handleFileDrop(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    this.classList.remove('hovering');
                    FilesGetImgSv(e.dataTransfer.files);
                }

                dropZone.addEventListener('dragenter', handleFileDragEnter, false);
                dropZone.addEventListener('dragleave', handleFileDragLeave, false);
                dropZone.addEventListener('dragover', handleFileDragOver, false);
                dropZone.addEventListener('drop', handleFileDrop, false);
            }

            //<input

            function handleFileSelect(evt) {
                FilesGetImgSv(evt.target.files);
            }

            document.getElementById('files').addEventListener('change', handleFileSelect, false);

            //图片文件 过滤 显示
            function FilesGetImgSv(files) {//获取文件
                for(var i = 0, f; f = files[i]; i++) {
                    if(RegExp("\.(" + ImgType.join("|") + ")$", "i").test(f.name.toLowerCase())) { //这里是简单后缀验证,可添加f.type验证格式
                        f.BolbUrl = getFileUrl(f);
                        demo.ImageLs.push(f);
                    }
                }
                reloadDiv();
            }
            function reloadDiv(){//刷新视图
                var t="";
                demo.ImageLs.forEach(function(v,i){
                    t=t+`<div class="upload-img-itme"><div class="d-image" onclick="demo.removeThisUpImg(${i})">![](${v.BolbUrl})</div><a class="rimg-name"><strong>${v.name}</strong></a></div>`;
                });  
                document.getElementById("output_area").innerHTML=t;
            }
            var demo = {
                ImageLs: [],
                removeThisUpImg: function(index) {
                    demo.ImageLs.splice(index, 1); 
                    reloadDiv();
                }
            };
        </script>
    </body> 
</html>

使用Vue效果示例

上一篇:python3与JavaScript简单的对比入门教程


下一篇:一步步用HTML5动手写个图片上传预览组件