H5上传图片并预览，移动端和pc端

最新推荐文章于 2020-10-15 14:59:58 发布

liuli啦啦啦

最新推荐文章于 2020-10-15 14:59:58 发布

阅读量755

点赞数

文章标签： html5 javascript jquery css3

本文链接：https://blog.csdn.net/weixin_44796488/article/details/107913007

版权

本文介绍了一个H5实现的商品详情图片上传和预览功能，支持最多4张商品图片、1张缩略图和1张banner图。添加图片后会自动隐藏input框，满额则隐藏添加按钮。图片可删除，使用ajax提交图片URL到后端。提供了完整的代码实现。

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

实现功能如图：
商品详情图片最多添加4张，缩略图最多1张，banner图最多一张。
每添加一张图片，就隐藏一个input框，当达到限定张数时，添加图片按钮消失，input框全部隐藏。
用户添加图片后可以点击小图右上角的 × 删除添加的图片。
这可以用ajax提交form表单，图片url地址已经转换为直接可以用的地址了，直接传到后端就行。

话不多说，代码如下，整个代码拿走，直接就可以用。不需要添加和改变任何的东西：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <title>Title</title>
  <style>
    .photos input[type='file'] {
    
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
    }
    .photos img, .photos input[type='file'] {
    
      width: 100px;
      height: 100px;
      margin-right: 30px;
      margin-top: 10px;
      transition: all .4s;
    }
    td{
    
      position: relative;
      height: 150px;
      left: 20px;
      top:20px;
      width: 550px
    }
    .photos div {
    
      display: inline-block;
      width: 100px;
      height: 100px;
      margin-right: 30px;
      position: relative;
    }
    .delClose{
    
      height: 20px;
      width: 20px;
      background-color:red;
      border-radius:50%;
      position: absolute;
      right: 0;
      top: 0;
      text-align: center
    }
  </style>
</head>
<body>
<form class="addForm" action="#" method="post" enctype="multipart/form-data" style

最低0.47元/天解锁文章

liuli啦啦啦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5上传图片并预览，移动端和pc端

实现功能如图：商品详情图片最多添加4张，缩略图最多1张，banner图最多一张。每添加一张图片，就隐藏一个input框，当达到限定张数时，添加图片按钮消失，input框全部隐藏。用户添加图片后可以点击小图右上角的 × 删除添加的图片。这可以用ajax提交form表单，图片url地址已经转换为直接可以用的地址了，直接传到后端就行。话不多说，代码如下，整个代码拿走，直接就可以用。不需要添加和改变任何的东西：<!DOCTYPE html><html lang="en">&
复制链接

扫一扫