文件上传（input files FileList）

HTML学习, JavaScript学习, 微博项目 本文总阅读量次

input元素做文件上传

  • 可使用HTML <input> 元素，设置type为file,并通过accept="image/*"限制图片的文件类型为图片（但一般建议后端做限制）
  • 比如：<input type="file" accept="image/*" id="file-picture">

FileList对象

  • FileList对象
  • 一个 FileList 对象通常来自于一个 HTML <input> 元素的 files 属性，可以通过这个对象访问到用户所选择的文件。
  • 所有type属性(attribute)为file的 <input> 元素都有一个files属性,用来存储用户所选择的文件.
  • 比如：
    1
    2
    3
    4
    5
    //html中
    <input id="fileItem" type="file">
    //js中
    //获取一个FileList对象中的第一个文件(File 对象)
    var file = document.getElementById('fileItem').files[0];

jquery中获取 FileList对象

  • 首先需要明确：jQuery对象只能使用jQuery对象的属性和方法，JavaScript对象只能使用JavaScript对象的属性和方法
  • 例子：
    1
    2
    3
    4
    5
    //html中
    <input type="file" accept="image/*" id="file-picture">
    //jquery中
    //获取一个FileList对象中的第一个文件(File 对象)
    var file = $('#file-picture')[0].files[0]
  • $('#file-picture')[0].files[0]:
    • files[0]是JavaScript中DOM元素的files属性FileList 对象
    • $('xx')是jQuery对象
    • $('xx')[0]是将jQuery对象($('xx'))转换为JavaScript对象，这样才可以使用JavaScript对象的属性和方法
  • 补充：$('xx')[0].files[0].size可获得文件的大小，单位是字节（B），使用$('xx')[0].files[0].size可用于判断文件的大小。
HTML学习, JavaScript学习, 微博项目