分别上传多个图像并使用不同的按钮

Posted 2023-03-22

【中文标题】分别上传多个图像并使用不同的按钮

【英文标题】：Upload multiple Images Separately and with Different Buttons

【发布时间】：2021-12-11 01:54:22

【问题描述】：

我需要用户使用 html 和 javascript 分别并按顺序上传多张照片。每张图片上传必须有一个按钮。

我用过 JQuery，但它只适用于一个按钮，而不是几个。

function readURL(input) 
  if (input.files && input.files[0]) 
    var reader = new FileReader();

    reader.onload = function(e) 
      $('#image1, #image2')
        .attr('src', e.target.result)
        .width(300)
        .height();
    ;

    reader.readAsDataURL(input.files[0]);
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
  <img src="..."  id='image1' class="profileImg1">
  <input type='file' class='uploader1' onchange="readURL(this);" />
  <div class="overlay">
    <i class="fas fa-pencil-alt text"></i>
  </div>
</div>


<div class="container2">
  <img src="..."  id='image2' class="profileImg2">
  <input type='file' class='uploader2' onchange="readURL(this);" />
  <div class="overlay">
    <i class="fas fa-pencil-alt text"></i>
  </div>
</div>

【问题讨论】：

请提供***.com/help/minimal-reproducible-example。并告诉我们您为使其发挥作用所做的努力。

欢迎来到 Stack Overflow！访问help center，使用tour 了解内容和How to Ask。请首先>>>Search for related topics on SO，如果您遇到困难，请发布您的尝试的minimal reproducible example，并使用[<>] 记录输入和预期输出sn-p 编辑器。

刚刚添加了我的代码！对此感到抱歉。

【参考方案1】：

你每次都换两张图片

改为委托

请注意，我将图像的 ID 作为数据属性提供了

我还建议您使用唯一的 ID 而不是唯一的类名

const readURL = function() 
  if (this.files && this.files[0]) 
    const reader = new FileReader();
    const preview = this.dataset.preview; 
    reader.onload = function(e) 
      $('#'+preview)
        .attr('src', e.target.result)
        .width(300)
        .height();
    ;

    reader.readAsDataURL(this.files[0]);
  

$(function() 
  $("#main").on("change", "[type=file]", readURL)
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div class="container1">
    <img src="..."  id='image1' class="profileImg1">
    <input type="file" id="uploader1" data-preview="image1" />
    <div class="overlay">
      <i class="fas fa-pencil-alt text"></i>
    </div>
  </div>


  <div class="container2">
    <img src="..."  id='image2' class="profileImg2">
    <input type="file" id="uploader2" data-preview="image2" />
    <div class="overlay">
      <i class="fas fa-pencil-alt text"></i>
    </div>
  </div>
</div>