前端知识小片段

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();
}
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读