记录：关于Drag&Drop Upload

    虽然google gears已经停止开发了，但是依旧没有退出浏览器，加上现在的html5 Binary，支持拖拽上传的浏览器其实已经不少了，各大互联网公司也都用在了实际的项目上，光是邮箱就有gmail，qq邮箱，163等一线邮箱产品在现代浏览器上都实现了拖拽上传。

    前一阵我看园子里的朋友 jelle 就发了篇拖拽上传的文。我也好奇，拉下来看了看。-- google gears 和 html5 Binary  : )

    所以就拿他的代码稍微改了改，就当是转载， 原文在http://www.cnblogs.com/idche/archive/2010/11/24/1886482.html 

    另外也当自己记录吧，稍微封装了一下下，不完善而且还有bug，配置里面没有对上传文件大小和后缀名的限制接口。

    唉..先不管了，先放这里，以后要用的时候再改改，添点东西

/*
 * drag - drop to upload file
 * by hongru.chenhr[at]gmail.com 
 * at 2011.04.21
  */
 
( function  () {
     //  private methods
     var  _  =  {
        extend:  function  (target, source, overwrite) {
             if  (overwrite  ==  undefined) overwrite  =   true ;
             for  ( var  p  in  source) {
                 if  ( ! (p  in  target)  ||  overwrite) {
                    target[p]  =  source[p]
                }
            }
             return  target;
        },
        log:  function  (msg, cat) {
             !! window.console  &&  console[(cat  ?  cat :  ' debug ' )](msg);
        },
        addEvent:  function  (o, e, f) {
            o.addEventListener  ?  o.addEventListener(e, f,  false ) : o.attachEvent( ' on ' + e,  function  () {f.call(o)});
        }
    }
    
     //  main function
     var  DDUpload  =   function  (config) {
         this .setConfig(config);
         this .init();
    }
    _.extend(DDUpload.prototype, {
        setConfig:  function  (config) {
             this .config  =  {
                name:  ' yourFileName ' ,
                action:  ' yourAction ' ,
                target: window,
                
                onloadstart:  function  () {},
                onprogress:  function  (e) {},
                oncomplete:  function  (response) {}
            }
            _.extend( this .config, config  ||  {});
        },
        init:  function  () {
             var  c  =   this .config, _this  =   this ;
             //  prevent default of dragenter and dragover
            _.addEvent(window,  ' dragenter ' ,  this .preventDefault);
            _.addEvent(window,  ' dragover ' ,  this .preventDefault);
            
             if  ( !! window.google  &&  google.gears) {
                 /*  google.gears
                 * http://code.google.com/intl/zh-CN/apis/gears/api_httprequest.html
                  */  
                 this .xhr  =  google.gears.factory.create( ' beta.httprequest ' );
                _.addEvent(c.target,  ' drop ' ,  function  (e) {
                    _this.googleGears(e);
                })
            }  else   if  ( !! XMLHttpRequest  &&   !! new  XMLHttpRequest().sendAsBinary) {
                 //  html5 XMLHttpRequest
                 this .xhr  =  window.ActiveXObject  ?   new  window.ActiveXObject( ' Microsoft.XMLHTTP ' ) :  new  XMLHttpRequest();
                _.addEvent(c.target,  ' drop ' ,  function  (e) {
                    _this.html5Binary(e);
                })
            }
        },
        preventDefault:  function  (e) {
            e  =  e  ||  window.event;
            
             if  (e  &&  e.stopPropagation) e.stopPropagation();
             else  e.cancelBubble  =   true ;
            
             if  (e  &&  e.preventDefault) e.preventDefault();
             else  e.returnValue  =   false ;
        },
        googleGears:  function  (e) {
             this .preventDefault(e);
             var  _this  =   this ;
             try  {
                 var  desktop  =  google.gears.factory.create( ' beta.desktop ' ),
                    data  =  desktop.getDragData(e,  ' application/x-gears-files ' ),
                    file  =  data.files[ 0 ];

                 var  d  =   this .googleBuild(file);
                
                 this .xhr.onloadstart  =   this .config.onloadstart;
                 this .xhr.upload.onprogress  =   this .config.onprogress;
                 this .xhr.onreadystatechange  =   function  () {
                     if  (_this.xhr.readyState  ===   4 ) {
                        _this.config.oncomplete.call(_this, _this.xhr.responseText);
                    }
                }
                
                 this .xhr.open( " POST " ,  this .config.action);
                 this .xhr.setRequestHeader( ' content-type ' ,  ' multipart/form-data; boundary= '   +  d.boundary);
                 this .xhr.send(d.builder.getAsBlob());
                 // this.xhr.onloadstart(file);
                
            }  catch (e) {
                
            }
        },
        googleBuild:  function  (file) {

             var  boundary  =   ' --multipartformboundary '   +  ( + new  Date),
                dashdash  =   ' -- ' ,
                crlf      =   ' \n ' ;
            
             var  builder  =  google.gears.factory.create( ' beta.blobbuilder ' );
        
            builder.append(dashdash);
            builder.append(boundary);
            builder.append(crlf);
            
            builder.append( ' Content-Disposition: form-data; name=" ' +   this .config.name  + ' " ' );
             if  (file.name) {
                builder.append( ' ; filename=" '   +  file.name  +   ' " ' );
            }
            builder.append(crlf);
            
            builder.append( ' Content-Type: application/octet-stream ' );
            builder.append(crlf);
            builder.append(crlf); 
            
             /*  Append binary data.  */
            builder.append(file.blob);
            builder.append(crlf);
    
             /*  Write boundary.  */
            builder.append(dashdash);
            builder.append(boundary);
            builder.append(crlf); 
            
             /*  Mark end of the request.  */
            builder.append(dashdash);
            builder.append(boundary);
            builder.append(dashdash);
            builder.append(crlf);
            
             return  {
                builder: builder,
                boundary: boundary
            }
        },
        
         /*  ====== for html5Binary =======  */
        html5Binary:  function  (e) {
             var  _this  =   this ;
             if  (e.dataTransfer.files.length  ==   0 )  return ;
            
             this .preventDefault(e);
             var  file  =  e.dataTransfer.files[ 0 ];
            
             var  b  =   this .binaryBuild(file.name, file.getAsBinary());
            
             this .xhr.onloadstart  =   this .config.onloadstart;
             this .xhr.onuploadprogress  =   this .config.onprogress;
             this .xhr.onreadystatechange  =   function  () {
                 if  (_this.xhr.readyState  ===   4 ) {
                    _this.config.oncomplete.call(_this, _this.xhr.responseText);
                }
            }
            
             this .xhr.open( ' POST ' ,  this .config.action,  true );
             this .xhr.setRequestHeader( ' content-type ' ,  ' multipart/form-data; boundary= '   +  b.boundary);
             this .xhr.setRequestHeader( ' Content-Length ' , file.size); 
             this .xhr.overrideMimeType( ' text/plain; charset=x-user-defined-binary ' );         // read.readAsDataURL(file);
             this .xhr.sendAsBinary(b.builder);
        },
        binaryBuild:  function  (name, binary) {
             var  boundary  =   ' --fileupload ' + ( + new  Date),
                dashdash  =   ' -- ' ,
                crlf  =   ' \n ' ;
                
             var  builder  =   '' ;
         
            builder  +=  dashdash;
            builder  +=  boundary;
            builder  +=  crlf;
            
             /*  httprequest header  */
            builder  +=   ' Content-Disposition: form-data; name=" ' +   this .config.name  + ' " ' ;
             if  (name) {
              builder  +=   ' ; filename=" '   +  encodeURIComponent(name)  +   ' " ' ;
            }
            builder  +=  crlf;
         
            builder  +=   ' Content-Type: application/octet-stream ' ;
            builder  +=  crlf;
            builder  +=  crlf; 
            
             /*  build Binary data  */
            builder  +=  binary;
            builder  +=  crlf;
            
             /*  Write boundary.  */
            builder  +=  dashdash;
            builder  +=  boundary;
            builder  +=  crlf;
            
             /*  Mark end of the request.  */
            builder  +=  dashdash;
            builder  +=  boundary;
            builder  +=  dashdash;
            builder  +=  crlf;
            
             return  {
                builder: builder,
                boundary: boundary
            }
        }
    })
    
     this .DDUpload  =  DDUpload;
    
})(); 

  

    比较惊讶的一点是http 请求头的创建，格式还真奇怪，非要 -- 和换行结合，且不像js一样支持分号... 汗，算我少见多怪吧...