H5新增API （拖拽、文件）

小鱼儿 2022-02-18 08:57 361阅读 0赞

# 拖拽API #

### 属性 ###

*  draggable 设置为true 可以被拖拽

### 拖拽事件 ###

*  ondragstart 开始被拖动的时候触发 绑定给被拖动的元素
 *  ondrag 拖动的过程总被连续触发 绑定给被拖动的元素
 *  ondragend 停止拖动的时候的触发 绑定给被拖动的元素
 *  ondragenter 当被拖拽的元素进入到目标元素 绑定给目标元素 用于进入目标去区域时 目标区域样式改变
 *  ondrageover 当被拖拽的元素在目标元素内移动 绑定给目标元素 需要组织默认的动作 `event.preventDefault()`
 *  ondrageleave 当被拖拽的元素离开目标元素 绑定给目标元素
 *  ondrop 在目标元素内停止拖拽 绑定给目标元素

### dataTransfer 对象 ###

# 文件API #

上传input

*  多文件上传 设置属性 multiple
 *  限制上传文件的格式 属性 `accept="image/jpeg"` `accept="text/html"` `image/*`

### FileList对象 ###

*  是用户上传或者拖拽到浏览器的 文件的集合
 *  可以通过 inputElement.files 来获取
 *  是一个类数组对象 由File对象组成

### File对象 ###

*  属性 name
 *  属性 size
 *  属性 type
 *  属性 lastModified
 *  属性 lastModifiedDate

### FileReader ###

属性

*  result 读取结果
 *  error 错误内容
 *  readyState 读取状态

方法

*  readAsText() 把文件读取为文本
 *  readyAsDataURL() 读取为base64图片编码
 *  readyAsArrayBuffer()
 *  readyAsBinaryString()
 *  abort() 终止读取操作

事件

*  onerror 读取错误时触发
 *  onabort 读取中断时触发
 *  onloadstart 读取开始时触发
 *  onload 读取成功时触发
 *  onloadend 读取结束时 不论成功或失败
 *  onprogress 读取过程中多次触发

--------------------

### 拖拽外部图片案例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>拖拽</title>
        <style>
            #drag_box{
                width:100px;
                height:100px;
                border:1px solid orange;
                background:#ccc;
                cursor: pointer;
            }
            #box{
                width:100%;
                height:400px;
                background:#eee;
                margin:10px 0px;
            }
            #box img{
                margin:5px;
                max-height: 150px;
            }
            .over{
                border:2px dashed #ccc;
                transform: scale(0.9, 0.9);
            }
        </style>
    </head>
    <body>
        <h3>请把文件夹中的图片拖到下面区域</h3>
            <div id="box" name="box"></div>
        <script>    
            //获取目标元素
            var box = document.querySelector("#box");
                //给目标元素绑定事件
            box.addEventListener("dragenter", function(){
                this.classList.add('over');
            }, false);
            box.addEventListener("dragleave", function(){
                this.classList.remove("over");
            }, false);
            box.addEventListener("dragover", function(e){
                e.preventDefault();  //阻止默认的动作
            }, false);
            box.addEventListener("drop", function(e){
                e.preventDefault(); //阻止浏览器默认行为
    
                //遍历FileList
                [].forEach.call(e.dataTransfer.files, function(itemFile){
                    //读取文件
                    readImage(itemFile);
                })
    
                this.classList.remove("over");  //恢复样式
            },false);
            /**
             * 读取图片
             * @param File  fileObj 
            */
            function readImage(fileObj) {
                //创建FileReader对象
                var frObj = new FileReader();
                //监听读取成功
                frObj.onload = function(){
                    var img = document.createElement("img");
                    img.src = frObj.result;
                    document.querySelector("#box").appendChild(img);
                }
                //读取
                frObj.readAsDataURL(fileObj);
            }
        </script>
    </body>
    </html>

### 选择器 ###

`querySelector()`和`querySelectorAll()`，参数都是`css`选择器，前者返回符合条件的第一个匹配的元素，如果没有则返回`Null`，后者返回符合筛选条件的所有元素集合，如果没有符合筛选条件的则返回空数组。

`getElementsByClassName()`返回一个类似数组的对象，包含了所有指定 `class` 名称的子元素。当调用发生在document对象上时, 整个DOM都会被搜索, 包含根节点，也可以在任意元素上调用。

document.querySelector('div');     //选择第一个div
    document.body.querySelector('p')[0];   //body下第一个p标签
    
    document.getElementsByClassName('red test');
    //获取所有 class 同时包括 'red' 和 'test' 的元素

### classList属性 ###

*  **length**: 返回`class`数量。
 *  **add**(class1, class2, ...):将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
 *  **contains**(class):表示列表中是否存在给定的`value`值，如果存在则返回`true`，不存在则返回`false`。
 *  **remove**(class1, class2, ...):移除元素中一个或多个类名，移除不存在的类名不会报错。
 *  **item**(index):返回指定索引值的类名，`index`为数字(从0开始)，索引不在范围内返回`null`，不为数字会被转成数字类型再取整数部分，若转换失败返回第一个类名。
 *  **toggle**(value,true || false):将值为`value`的`class`在添加和移除之间切换。

classList 属性返回的是一个 `DOMTokenList` 对象。此属性不兼容IE10以下版本。

Object.prototype.toString.call(node.classList);   
    //'[object DOMTokenList]'

相对应 `className` 属性，可以设置或返回元素的 class 。返回的是字符串类型，设置会把原来的 class 值完全覆盖。语法：`node.className = className`。

<div class='wrap box'></div>
    
    let oDiv = document.querySelector('div');
    console.log(oDiv.className);   //'wrap box'
    oDiv.className = 'class1';
    console.log(oDiv.className);   //'class1'

### data属性 ###

新的HTML5标准允许在普通的元素标签里，嵌入类似`data-*`的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由`js`动态修改，也支持`CSS`选择器。

用`getAttribute`、`setAttribute`存取`dataset`。

通过`.dataset` API 存取`dataset`。它返回一个对象，可以通过`node.dataset.name`的形式新增或修改。

node.dataset.name = 'test';

### 内容可编辑 ###

加有`contenteditable`属性的元素，点击可以编辑。此属性为[布尔属性][Link 1]。

<div contenteditable=true>
        <p>i am editable</p>
        <p>i am editable too</p>
    </div>

### 本地存储 ###

`localStorage` `sessionStorage`。[Javascript本地存储小结][Javascript]。

它也是采用Key - Value的方式存储数据，底层数据接口是sqlite，按域名将数据分别保存到对应数据库文件里。它能保存更大的数据（IE8上是10MB，Chrome是5MB），同时保存的数据不会再发送给服务器，避免带宽浪费。

3.1 localStorage的属性方法

下表是localStorge的一些属性和方法

<table> 
 <thead> 
  <tr> 
   <th>属性方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>localStorage.length</td> 
   <td>获得storage中的个数</td> 
  </tr> 
  <tr> 
   <td>localStorage.key(n)</td> 
   <td>获得storage中第n个元素对的键值（第一个元素是0）</td> 
  </tr> 
  <tr> 
   <td>localStorage.getItem(key)</td> 
   <td>获取键值key对应的值</td> 
  </tr> 
  <tr> 
   <td>localStorage.key</td> 
   <td>获取键值key对应的值</td> 
  </tr> 
  <tr> 
   <td>localStorage.setItem(key, value)</td> 
   <td>添加数据，键值为key，值为value</td> 
  </tr> 
  <tr> 
   <td>localStorage.removeItem(key)</td> 
   <td>移除键值为key的数据</td> 
  </tr> 
  <tr> 
   <td>localStorage.clear()</td> 
   <td>清除所有数据</td> 
  </tr> 
 </tbody> 
</table>

3.2 localStorage的缺点

*  ① localStorage大小限制在500万字符左右，各个浏览器不一致
 *  ② localStorage在隐私模式下不可读取
 *  ③ localStorage本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存，想想就觉得吓人啊）

④ localStorage不能被爬虫爬取，不要用它完全取代URL传参

--------------------

SessionStorage

> 和服务器端使用的session类似，是一种会话级别的缓存，关闭浏览器会数据会被清除。不过有点特别的是它的作用域是窗口级别的，也就是说不同窗口间的sessionStorage数据不能共享的。使用方法（和localStorage完全相同）：

<table> 
 <thead> 
  <tr> 
   <th>属性方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>sessionStorage.length</td> 
   <td>获得storage中的个数</td> 
  </tr> 
  <tr> 
   <td>sessionStorage.key(n)</td> 
   <td>获得storage中第n个元素对的键值（第一个元素是0）</td> 
  </tr> 
  <tr> 
   <td>sessionStorage.getItem(key)</td> 
   <td>获取键值key对应的值</td> 
  </tr> 
  <tr> 
   <td>sessionStorage.key</td> 
   <td>获取键值key对应的值</td> 
  </tr> 
  <tr> 
   <td>sessionStorage.setItem(key, value)</td> 
   <td>添加数据，键值为key，值为value</td> 
  </tr> 
  <tr> 
   <td>sessionStorage.removeItem(key)</td> 
   <td>移除键值为key的数据</td> 
  </tr> 
  <tr> 
   <td>sessionStorage.clear()</td> 
   <td>清除所有数据</td> 
  </tr> 
 </tbody> 
</table>

### 5. sessionStorage和localStorage的区别 ###

*  sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。当用户关闭浏览器窗口后，数据立马会被删除。
 *  localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。第二天、第二周或下一年之后，数据依然可用。

### scrollIntoView() ###

`Element.scrollIntoView()` 方法让当前的元素滚动到浏览器窗口的可视区域内。[scrollIntoView MDN][]

参数为一个布尔值，为`true`，元素的顶端将和其所在滚动区的可视区域的顶端对齐；如果为`false`，元素的底端将和其所在滚动区的可视区域的底端对齐。

element.scrollIntoView(); // 等同于element.scrollIntoView(true)

[Link 1]: https://github.com/chingchao/web-note/blob/master/js/checked.md#%E5%B8%83%E5%B0%94%E5%B1%9E%E6%80%A7
[Javascript]: https://segmentfault.com/a/1190000007506189
[scrollIntoView MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView