如何像我在代码中所做的那样，在通过javascript上传后，如何上传多个图像文件并相应地查看它们？

Posted 2023-01-15

这里，当我上传第一张图片时，它会出现在第三位；当我尝试上传第二张图片和第三张图片时，它会一直出现在同一位置。以前的图像不再可用。但是我必须上传所有三个图像，并将它们显示在正确的位置。我该怎么办？

var loadFile = function(event) 
        var image = document.getElementById('output-1');
        image.src = URL.createObjectURL(event.target.files[0]);
    ;
    var loadFile = function(event) 
        var image2 = document.getElementById('output-2');
        image2.src = URL.createObjectURL(event.target.files[0]);
    ;
    var loadFile = function(event) 
        var image3 = document.getElementById('output-3');
        image3.src = URL.createObjectURL(event.target.files[0]);
    ;

<div class="form-group">
  <p><input type="file"  accept="image/*" name="company_one" id="file"  onchange="loadFile(event)" style="display: none;"></p>
  <p><label class="btn btn-success" for="file" style="cursor: pointer;">Change Logo</label> - <span style="font-size:14px;font-weight:bold;">(Image One)</span></p>
  <p><img id="output-1" width="200" src=""/></p>
</div>

<div class="form-group">
  <p><input type="file"  accept="image/*" name="company_two" id="file"  onchange="myfunction()" style="display: none;"></p>
  <p><label class="btn btn-success" for="file" style="cursor: pointer;">Change Logo</label> - <span style="font-size:14px;font-weight:bold;">(Image Two)</span></p>
  <p><img id="output-2" width="200" src=""/></p>
</div>

<div class="form-group">
  <p><input type="file"  accept="image/*" name="company_three" id="file"  onchange="loadFile(event)" style="display: none;"></p>
  <p><label class="btn btn-success" for="file" style="cursor: pointer;">Change Logo</label> - <span style="font-size:14px;font-weight:bold;">(Image Three)</span></p>
  <p><img id="output-3" width="200" src=""/></p>
</div>

答案

您需要使标签对于输入和调用正确功能来说是唯一的

另一答案

您通过多次定义功能loadFile来覆盖它。问题可以通过使用不同的名称或添加图像id作为参数来解决]