HTML中上传与读取图片或文件（input file）----在路上（25）

最新推荐文章于 2021-06-17 07:14:11 发布

小尾巴的梦

最新推荐文章于 2021-06-17 07:14:11 发布

阅读量1.6w

点赞数

本文链接：https://blog.csdn.net/qq_36995398/article/details/54094488

版权

本文介绍了HTML中<input type='file'>元素用于上传和读取图片及文件的基本操作，包括单次上传、批量上传、删除、增加照片等功能。通过示例代码展示了如何实现更人性化的文件上传效果，同时提供了限制图片数量、格式和大小的判断。内容涵盖使用 FileReader API 读取文件以及在实际开发中的应用技巧。

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

input file相关知识简例

在此介绍的input file相关知识为：上传照片及文件，其中包括单次上传、批量上传、删除照片、增加照片、读取图片、对上传的图片或文件的判断，比如限制图片的张数、限制图片的格式、大小等。

在开发中，文件上传必不可少，<input type="file" /> 是常用的上传标签，但特别low、浏览的字样又不能换，但难不倒强迫症患者...看一些其他网站有的将<input type="file" />隐藏，用点击其他的标签（图片等）来时实现选择文件上传功能，也有的将其设为透明，这里推荐后者，详情请参考下面代码。

此为本人写的demo，更人性化的效果实现，供分享，不足之处望提议，将不胜感激

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <style>
 10         .kuang{
   
 11             display: inline-block;
 12             vertical-align: middle;
 13             box-shadow: inset 0px 1px 20px 5px #ddd;
 14             text-align: left;
 15             margin-right: 20px;
 16             margin-bottom: 20px;
 17             width: 165px;
 18             height: 165px;
 19         }
 20         .addhao{
   
 21             width: 165px;
 22             height: 165px;
 23             background: url(../img/add_photo_plus.png);
 24         }
 25         .on{
   
 26             display: inline-block;
 27             text-align: left;
 28             margin-right: 20px;
 29             margin-bottom: 20px;
 30             width: 165px;
 31             height: 165px;
 32             display: none;
 33             position: relative;
 34             overflow: hidden;
 35             line-height: 200px;
 36         }
 37         .xian{
   
 38             width: 165px;
 39             height: 165px;
 40             position: absolute;
 41             background-image: linear-gradient(
 42                     0deg,
 43                     rgba(0,0,0,0.7) 50%,
 44                     transparent 50%
 45             );
 46             background-size: 165px 4px;
 47             display: none;
 48             z-index: 2;
 49         }
 50