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

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

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

示例




    
        
        

        
    

    
        
将文件拖放到此处

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




    
        
        

        
    

    
        
将文件拖放到此处

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

示例




    
        
        简易上传预览 
        
    

    
        
        

使用Vue效果示例

你可能感兴趣的:(一步步用HTML5动手写个图片拖拽上传预览组件)