有的朋友可能对于“H5怎样做出图片拖拽上传预览组件 h5移动端实现多张图片上传”还有很多不明白的地方，下面由77ISP云服务器技术小编为大家讲解一下，下面我们来一起看看吧！

这次给大家带来H5怎样做出图片拖拽上传预览组件，H5做出图片拖拽上传预览组件的注意事项有哪些，下面就是实战案例，一起来看一下。

H5中拖拽事件有:
[ – ] DragDrop：拖放完成，也就是鼠标拖入对象并在拖放区域释放。
[ – ] DragEnter ：拖放进入，也就是鼠标拖放对象进入拖放区域。
[ – ] DragLeave：离开拖放区域。
[ – ] DragOver ：拖放对象悬浮于拖放区域，在拖放区域内移动时多次触发。

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

示例

        
            .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;
            }        
    
    
        
            将文件拖放到此处
            
        
        
            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('
', escape(f.name), ' (', f.type || 'n/a', ') - ',
                        f.size, ' bytes, last modified: ',
                        f.lastModifiedDate.toLocaleDateString(), '
');
                }                document.getElementById('list').innerHTML = '
' + output.join('') + '
';
            }            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);

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

        
            .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;
            }        
    
    
        
            将文件拖放到此处
            
        
        
            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('
', escape(f.name), ' (', f.type || 'n/a', ') - ',
                            f.size, ' bytes, last modified: ',
                            f.lastModifiedDate.toLocaleDateString(), '
');
                    }
                }                document.getElementById('list').innerHTML = '
' + output.join('') + '
';
            }            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);

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

示例

 
        
            #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);
            }

        
            
                将文件拖拽到这里或点击这里                    
                
                
            
        
        
            清空
            上传
        
        
            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+`![](${v.BolbUrl})${v.name}`;
                });  
                document.getElementById("output_area").innerHTML=t;
            }            var demo = {                ImageLs: [],                removeThisUpImg: function(index) {
                    demo.ImageLs.splice(index, 1); 
                    reloadDiv();
                }
            };

以上就是“H5怎样做出图片拖拽上传预览组件 h5移动端实现多张图片上传”的详细内容，更多请关注77isp云服务器技术网其它相关文章！