前端知识小片段

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/javawebty/article/details/80558000

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上访问子框架内的样式 。

阅读更多

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