H5新增API

file 文件（上传）

步骤：

获取（file的）input 标签：

var input=document.querySelector(” # file ” )

监听 onchange 事件：

input . onchange = function ( ) { console.log ( this . files ) }

                    此处输出 ：file数组    （ file对象包含的信息：）                                         lastModified 最后一次修改时间（毫秒）                                                       lastModifiedDate 最后一次修改日期                                name: 文件名                                type： 文件类型                                                                                                                                                                                                                                                                                  size：文件大小

获取 / 遍历 所有上传的file文件

for(var i=0;i<=this.files.length;i++){

创建阅读实例

var fr= new FileReader ( )

设置读取方式

readAsDataURL ( file )

• readAsDataURL( file ) 以地址读取，接收参数为：文件对象
  
  • readAsText( file ) 以文本读取
  • readAsBinaryString( file ) 以二进制读取

监听onload（等）事件

fr.onload=function ( ) { }

• onload： 读取完成
  
  • onloadstart 开始读取
  • onloadend 结束读取 无论成功失败都会触发
    
    • onerror 错误触发（读取出错时）
  • onabort 中断读取时触发

创建图片/ 文件 并追加到body里面去

var img=new Image( ) ; img.src=this.result

document.body.appendChild(img)

//console.log ( this . files ) 输出 ：FileList {0: File, length: 1}> file：（展开之后为以下内容）    length: 10:     FilelastModified: 1463621270000    lastModifiedDate: Thu May 19 2016 09:27:50 GMT+0800 (中国标准时间)    name: "background.png"    size: 28052type: "image/png"    webkitRelativePath: ""> __proto__: File__proto__: FileList// html<input type="file" name="" id="file" multiple// JSvar inp=document.querySelector("#file");    inp.onchange=function(){        console.log(this.files);        for(var i=0;i<=this.files.length;i++){            var file=this.files[i];            console.log(file);                var fr= new FileReader();            // fr.readAsDataURL(file);//接收参数为：文件对象                // fr.readAsText(file);                fr.readAsBinaryString(file);                fr.onload=function(){                    console.log(this.result);                    var img=new Image();                    img.src=this.result;                    document.body.appendChild(img)                }        }               // }    }

drag 拖拽

1、一个元素拖拽到另一个处

draggable 允许该元素被拖动

被拖拽元素事件：

ondragstart=function(e) { } 开始拖拽

ondrag=function(e) { } 拖拽中

ondragend=function(){ } 拖拽结束

目标元素事件：（拖拽到此元素）

ondragenter=function(){ } 进入目标元素

dragleave=function(){ } 离开目标元素

浏览器默认禁止在元素上触发 ondrop（禁止将其他元素拖拽到目标元素上放手）所以需要在dragover上阻止浏览器的默认事件才能触发ondrop -------------用 e. preventDefault ( ) ;

ondragover=function(e) { } 在目标元素中移动

ondrop=function(e){ } 在目标元素中放手

dataTransfer 贯穿于整个拖拽生命中期的承载对象

• e . dataTransfer . setData ( format , content )
  format : 数据额格式——支持text URL 或其他MIME类型
  content ： 要传递的内容

  • e . dataTransfer.getData ( format ) 获取通过 setData 设置的值
    e . dataTransfer.effectAllowed = “ ” 设置拖拽元素的鼠标效果只能在 ondragstart 里设置
    常见的有：move copy link copyLink all none…
    当指定为none时，ondrop无法触发
    e . dataTransfer.dropEffect = ” ” 设置拖拽元素的 ondrop 鼠标效果 只能在 ondrop 里设置

  //html

  //JS
  //被拖拽元素
  var box=document.querySelector(“.box”);
  //目标元素
  var target=document.querySelector(“.box2”);
  /*被拖拽元素事件：
  */
  box.ondragstart=function(e){
  console.log(“开始”);
  console.log(e);
  console.log(e.dataTransfer);
  // e.dataTransfer.setData(“text”,”hello”);
  e.dataTransfer.setData(“text”,e.target.id)// 此处e.target指的是.box / #_box
  }
  box.ondrag=function(){
  // console.log(“拖拽中”);

  }
  box.ondragend=function(){
  // console.log(“拖拽结束”);
  }

  target.ondragenter=function(){
  // console.log(“进入目标元素”);
  }
  target.dragleave=function(){
  // console.log(“离开目标元素”);
  }
  /*浏览器默认进制在元素上drop（禁止将其他元素拖拽到目标元素上放手）
  需要在dragover是阻止浏览器的默认时间才能触发ondrop*/
  target.ondragover=function(e){
  // console.log(“在目标元素上移动”);
  e.preventDefault();
  }
  target.ondrop=function(e){
  //浏览器默认触发不了ondrop，需要更改target.ondragover事件来触发
  console.log(“在目标元素中放手”);
  // target.appendChild(box);
  console.log(e.dataTransfer.getData(“text”));
  /*e.dataTransfer.setData(“text”,选择器 / “字符串”…)
  e.dataTransfer.getData(“text”)上面第一个参数set了什么，下面就get什么
  */
  var eId=e.dataTransfer.getData(“text”);
  target.appendChild(document.querySelector(“#”+eId));
  }

2、通过拖拽上传文件

注意事项：

• 要在.ondragover 中阻止浏览器默认 不允许拖拽 设置 ————–用e.preventDefault();

• 要在.ondrop 中阻止文件拖进来 就被浏览器自动刷新/下载显示的事件 ————–用e.preventDefault();

  // html

  拖拽文件到此处

  // JS
  var box=document.querySelector(“.box”);
  box.ondragover=function(e){
  e.preventDefault();
  }
  box.ondrop=function(e){
  e.preventDefault();//阻止文件拖进来 ，浏览器自动刷新/下载的事件
  console.log(e.dataTransfer.files);
  var files=e.dataTransfer.files;
  for(var i=0;i