HTML5制作图片拖拽上传预览组件

本文详细介绍HTML5实现图片拖拽上传预览组件具体操作，配合代码使用效果更佳，非常适合初学者入门，感兴趣的小伙伴们可以参考一下。

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

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

示例

                                            
            
将文件拖放到此处
            
        
             

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

                                            
            
将文件拖放到此处
            
        
             

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

示例

                   
            
                将文件拖拽到这里或点击这里                                                    
            
        
        
            清空            上传        
             

关于HTML5制作图片拖拽上传预览组件的方法就分享到这里了，当然并不止以上和大家分析的办法，不过小编可以保证其准确性是绝对没问题的。希如果喜欢本篇文章，不妨把它分享出去让更多的人看到。