< img  draggable ="true"   /> 

setData(format, data)：把被拖动的数据赋值给dataTransfer对象。

getData(format)：获取dataTransfer中存放的拖动数据。

clearData(format)：移除指定类型的数据。

effectAllowed：设置或获取数据源元素中的数据可以执行的操作。

dropEffect：设置或获取拖动的目标上允许的操作以及相关的鼠标形状。

files：返回拖动的文件的列表FileList。
types：ondragstart中发送的数据(被拖动的数据)类型的列表。

dragstart：要被拖拽的元素开始拖拽时触发，这个事件对象是被拖拽元素。
drag:拖拽元素时触发，这个事件对象是被拖拽元素。
dragenter：拖拽元素进入目标元素时触发，这个事件对象是目标元素。
dragover：拖拽某元素在目标元素上移动时触发，这个事件对象是目标元素。
dragleave：拖拽某元素离开目标元素时触发，这个事件对象是目标元素。
drop：将被拖拽元素放在目标元素内时触发，这个事件对象是目标元素。
dragend：在drop之后触发，就是拖拽完毕时触发，这个事件对象是被拖拽元素。

<! DOCTYPE HTML >
< html >
< head >
< script  type ="text/javascript" >
   function  allowDrop(ev){
    ev.preventDefault();
  }
   function  drag(ev){
    ev.dataTransfer.setData( " Text " ,ev.target.id);
  }
   function  drop(ev){
     var  data = ev.dataTransfer.getData( " Text " );
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
  }
</ script >
</ head >
< body >
   < div  id ="div1"  ondrop ="drop(event)"  ondragover ="allowDrop(event)" ></ div >
   < img  id ="drag1"  src ="img_logo.gif"  draggable ="true"  ondragstart ="drag(event)"  width ="336"  height ="69"   />
</ body >
</ html >

<! DOCTYPE HTML >
< html >
< head >
  < meta  charset ="utf-8" >
     < title >HTML5拖放文件 </ title >
     < style >
  #section { font-family :  "Georgia", "微软雅黑", "华文中宋" ; }
        .container { display : inline-block ; min-height : 200px ; min-width : 360px ; color : #f30 ; padding : 30px ; border : 3px solid #ddd ; -moz-border-radius : 10px ; -webkit-border-radius : 10px ; border-radius : 10px ; }
  .preview { max-width : 360px ; }
  #files-list { position : absolute ; top : 0 ; left : 500px ; }
  #list { width : 460px ; }
  #list .preview { max-width : 250px ; }
  #list p { color : #888 ; font-size : 12px ; }
  #list .green { color : #09c ; }
     </ style >
</ head >
< body >
     < div  id ="section" >
         < p >把你的图片拖到下面的容器内： </ p >
         < div  id ="container"  class ="container" >
         </ div >
   < div  id  ="files-list" >
    < p >已经拖进过来的文件： </ p >
    < ul  id ="list" ></ ul >
   </ div >
     </ div >
  < script >
  if  (window.FileReader) {
   var  list  =  document.getElementById( ' list ' ),
   cnt  =  document.getElementById( ' container ' );

//  判断是否图片
   function  isImage(type) {
    switch  (type) {
    case   ' image/jpeg ' :
    case   ' image/png ' :
    case   ' image/gif ' :
    case   ' image/bmp ' :
    case   ' image/jpg ' :
     return   true ;
    default :
     return   false ;
   }
  }

//  处理拖放文件列表
   function  handleFileSelect(evt) {
   evt.stopPropagation();
   evt.preventDefault();

var  files  =  evt.dataTransfer.files;
    for  ( var  i  =   0 , f; f  =  files[i]; i ++ ) {
     var  t  =  f.type  ?  f.type :  ' n/a ' ,
     reader  =   new  FileReader(),
     looks  =   function  (f, img) {
      list.innerHTML  +=   ' <li><strong> '   +  f.name  +   ' </strong> ( '   +  t  +
        ' ) -  '   +  f.size  +   '  bytes<p> '   +  img  +   ' </p></li> ' ;
      cnt.innerHTML  =  img;
     },
     isImg  =  isImage(t),
     img;

//  处理得到的图片
     if  (isImg) {
     reader.onload  =  ( function  (theFile) {
       return   function  (e) {
       img  =   ' <img class="preview" src=" '   +  e.target.result  +   ' " title=" '   +  theFile.name  +   ' "/> ' ;
       looks(theFile, img);
      };
     })(f)
     reader.readAsDataURL(f);
    }  else  {
     img  =   ' "o((>ω< ))o"，你传进来的不是图片！！ ' ;
     looks(f, img);
    }
   }
  }
  
   //  处理插入拖出效果
   function  handleDragEnter(evt){  this .setAttribute( ' style ' ,  ' border-style:dashed; ' ); }
   function  handleDragLeave(evt){  this .setAttribute( ' style ' ,  '' ); }

//  处理文件拖入事件，防止浏览器默认事件带来的重定向
   function  handleDragOver(evt) {
   evt.stopPropagation();
   evt.preventDefault();
  }
  
  cnt.addEventListener( ' dragenter ' , handleDragEnter,  false );
  cnt.addEventListener( ' dragover ' , handleDragOver,  false );
  cnt.addEventListener( ' drop ' , handleFileSelect,  false );
  cnt.addEventListener( ' dragleave ' , handleDragLeave,  false );
  
 }  else  {
  document.getElementById( ' section ' ).innerHTML  =   ' 你的浏览器不支持啊，同学 ' ;
 }
  </ script >
</ body >
</ html >

onloadstart，onprogress，onabort，onerror，onload，onloadend

function startRead() {  
   //  obtain input element through DOM 
  
   var file = document.getElementById('file').files[0];
   if(file){
    getAsText(file);
  }
}

function getAsText(readFile) {
   var reader =  new FileReader();  
   //  Read file into memory as UTF-16      
  reader.readAsText(readFile, "UTF-16");  
   //  Handle progress, success, and errors
  reader.onprogress = updateProgress;
  reader.onload = loaded;
  reader.onerror = errorHandler;
}

function updateProgress(evt) {
   if (evt.lengthComputable) {
     //  evt.loaded and evt.total are ProgressEvent properties
     var loaded = (evt.loaded / evt.total);
     if (loaded < 1) {
       //  Increase the prog bar length
       //  style.width = (loaded * 200) + "px";
    }
  }
}

function loaded(evt) {  
   //  Obtain the read file data    
   var fileString = evt.target.result;
   //  Handle UTF-16 file dump
   if(utils.regexp.isChinese(fileString)) {
     // Chinese Characters + Name validation
  }
   else {
     //  run other charset test
  }
   //  xhr.send(fileString)     
}

function errorHandler(evt) {
   if(evt.target.error.name == "NotReadableErr") {
     //  The file could not be read
  }
}

window.open('http://aaa.bbbb.com/ccc.rar','_blank')