前端知识小片段

1.input元素的上传

---

input若将其type设置为file则可以让我们选择本地的一个或者多个文件进行通过表单提交或者JavaScript的File api进行文件的上传。

<input name="myFile" type="file" 
accept=".jpg,.jpeg,.png" multiple>

• 支持的常用属性

  accept 该属性表明了服务器端可接受的文件类型 ,该属性的值必须为一个逗号分割的列表,包含了多个唯一的内容类型声明

multiple 这个属性指示用户能否输入多个值，选择多个文件
required 是否文件选择是必须的

---

• 取值

var curFiles = input.files;

返回值是一个 FileList 对象,这个对象是一个包含了许多 File 文件的列表(你也可以想列表一样操作它).

每个 File 对象包含了下列信息:

• name: 文件名.
• lastModified: UNIX timestamp 形式的最后修改时间.
• lastModifiedDate: Date 形式的最后修改时间.
• type: DOMString 文件的 MIME 类型.

---

• 事件

input.addEventListener('change', changeFunction);

---

• 提交
  这里可以通过两种方式进行提交
  1.通过form表单进行提交，注意此时form表单此时必须要有如下属性

enctype ="multipart/form-data"

2.通过FormData进行提交，此时便可以通过ajax进行提交(IE10以及以上支持)

var formData = 
new FormData(document.getElementById('editUserInfo'));

---

---

2.getComputedStyle 获取元素计算完成后的样式（最终展示的样式结果）

---

• 用法：

var style = window.getComputedStyle("元素", "伪类");

---

• 返回的style是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身，该style只读，无法通过其改变element的样式。
• 需要注意的是，返回的对象的键名是 css 的驼峰式写法：backgroundColor
• 需要注意的是 float 属性，根据 《JavaScript 高级程序》所描述的情况 ，float 是 JS 的保留关键字。根据 DOM2 级的规范，取元素的 float 的时候应该使用 cssFloat。其实 chrome 和 Firefox 是支持 float 属性的，也就是说可以直接使用
• 关于 getComputedStyle 的兼容性问题，在 Chrome 和 Firefox 是支持该属性的，同时 IE 9 10 11 也是支持相同的特性的，IE 8并不支持这个特性。 IE 8 支持的是 element.currentStyle 这个属性，这个属性返回的值和 getComputedStyle 的返回基本一致，只是在 float 的支持上，IE 8 支持的是 styleFloat,这点需要注意。此时在IE8中 document.defaultView != window

对比：element.style 只能获取元素的内联样式，驼峰写法，返回值可读写

在许多在线的演示代码中，getComputedStyle是通过 document.defaultView 对象来调用的。大部分情况下，这是不需要的，因为可以直接通过window对象调用。但有一种情况，你必需要使用 defaultView, 那是在firefox3.6上访问子框架内的样式 。

3.页面之间的localStorage的监听

//添加监听事件storage
 window.addEventListener("storage",EventHandle,true);

这个事件每个页面都要添加，这样才可以在同源下监听到
这个事件只有setItem,removeItem的时候才会出发
setItem后再次setItem同一个对象是不会出发的，必须变成的新的对象，或者removeItem掉.
getItem是不会出发的，
同一个变量之间是不会出发的

//AES加密
window.CommonJS.useAES = function (key, content) {
    let _key = key + '';
    if (_key.length < 16) {
        _key += "0".repeat(16 - _key.length);
    }
    let key1 = CryptoJS.enc.Utf8.parse(_key);  //十六位十六进制数作为密钥
    let iv = CryptoJS.enc.Utf8.parse(_key);   //十六位十六进制数作为密钥偏移量
    let srcs = CryptoJS.enc.Utf8.parse(content);
    let encrypted = CryptoJS.AES.encrypt(srcs, key1, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    return encrypted.toString();
}