H5如何做出图片拖拽上传预览组件-

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

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

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

示例

    
        
        
        
    
    
        
            将文件拖放到此处
            

        
        《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('
', 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);        《script》
     

2.限定文件大小与文件格局

    
        
        
        
    
    
        
            将文件拖放到此处
            

        
        《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('
', 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);        《script》
     

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

示例

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

信赖看了本案牍例你已经把握了办法，更多出色请关注 百分百源码网 其它相干文章！

相干浏览：

python3与JS有什么不一样

H5怎样做图片上传预览组件

flv.js的运用详解

怎样运用s-xlsx实现Excel 文件导入和导出

以上就是H5如何做出图片拖拽上传预览组件的细致内容，更多请关注 百分百源码网 其它相干文章！