HTML5文件操作

最新推荐文章于 2024-06-29 16:04:34 发布

执迷原理

最新推荐文章于 2024-06-29 16:04:34 发布

阅读量1.6k

点赞数

文章标签： html5 html css

本文链接：https://blog.csdn.net/ddd2501/article/details/127910838

版权

本文介绍了HTML5中文件上传的功能，包括文件选择框的accept和multiple属性、File对象的属性、FileReader对象的使用方法、Blob对象在文件下载中的应用，以及在React中onChange事件的工作原理和问题解析。

摘要由CSDN通过智能技术生成

1.背景

我们经常会用到文件上传功能，例如，百度网盘、QQ邮箱等，在HTML5中，我们可以通过文件框来选择上传文件

2.文件选择框

两个重要的属性
- accept（过滤MIME类型文件，例如：image/png、image/jpeg、image/gif、text/plain等）
  - 用于设置文件的过滤类型，也就是说设置只能选取哪种类型的文件进行上传，多个过滤类型用逗号隔开

<input type="file" accept="过滤文件类型1，过滤文件2...">

- muiltiple
  - 表示是否选择多个文件，也就是说任意类型文件，可以选择多个进行上传
  - 通常和accept搭配使用，提高严谨性

<input type="file" accept="过滤文件类型1，过滤文件2..." multiple> // 因为multiple的属性值就是本身，所以直接写 multiple

技巧(蛮实用的技巧)
- 因为文件选择框样式很丑，所以我们可以用到opacity属性，将其边透明，之后利用label来做一个好看的样式，之后利用定位来解决点击问题

  <style>
    #content{
      width: 160px;
      margin: 30px auto;
    }

    #filePicker{
      position: relative;
      width: 160px;
      height: 50px;
      border-radius: 10px;
      background-color: gray;
      line-height: 50px;
      text-align: center;
      color: white;
      cursor: pointer;
    }

    #filePicker:active{
      background-color: blue;
    }

    #fileInput{
      position: absolute;
      top: 0px;
      left: 0px;
      width: 160px;
      height: 50px;
      opacity: 0;
    }
  </style>
</head>

<body>
  <div id="content">
    <form id="filePicker">
      <label>点击选择文件</label>
      <input type="file" id="fi