关于拖拽上传 [一个拖拽上传修改头像的流程]

拖拽是操作系统用户体验最伟大的改进之一。它让人随心所欲的操作，更符合人们的直观感受。

如今现代的浏览器已经有很多支持拖拽文件读取操作，其优点不再复述。前端时间利用拖拽改进了一下网站的头像上传流程，对其中的要点和实践体会做一点总结。

先看一下总体视图：
关于拖拽上传 [一个拖拽上传修改头像的流程]

1、文件拖拽接受区域要有明显的标示，并且要尽可能的大（由于版面的原因，这个界面的拖放盒子并不大）。可以用虚线框盒子等样式吸引用户拖拽文件。最好有明显的文字提示和图标配合。

2、在交互体验上当文件拖入浏览器窗口时，可以用拖放区变换背景颜色等向用户发起放置操作邀请。
实现代码：

doc.bind({
                'dragenter':function(e){
                    $("#brsbox").addClass("dragbrowse");
                    dropbox.addClass("shine");
                    return false;
                    },
                'dragleave':function(e){
                    dropbox.removeClass("shine");
                    return false;
                    },
                'drop':function(e){
                    stopdft(e);}
                });
            dropbox.bind({
                'dragenter':function(e){
                    dropbox.addClass("candrop");
                    stopdft(e);},
                'dragleave':function(e){
                    dropbox.removeClass("candrop");
                    stopdft(e);},
                'dragover':function(e){
                    stopdft(e);},
                'drop':function(e){

                    }