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

Question

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

​

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>

​

Answer 1

您需要使标签对输入唯一，并调用正确的函数

https://jsfiddle.net/nvcx2qmg/

 <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="file2"  onchange="loadFile2(event)" style="display: none;"></p>
      <p><label class="btn btn-success" for="file2" 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="file3"  onchange="loadFile3(event)" style="display: none;"></p>
      <p><label class="btn btn-success" for="file3" 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

。

 function loadFile(event) {
    console.log("1")
      var image = document.getElementById('output-1');
      image.src = URL.createObjectURL(event.target.files[0]);
    };
    function loadFile2(event) {
    console.log("2")

      var image2 = document.getElementById('output-2');
      image2.src = URL.createObjectURL(event.target.files[0]);
    };
     function  loadFile3(event) {
     console.log("3")

      var image3 = document.getElementById('output-3');
      image3.src = URL.createObjectURL(event.target.files[0]);
    };

Answer 2

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

var loadFile = function(event, imageId) {
  var image = document.getElementById(imageId);
  if (image) image.src = URL.createObjectURL(event.target.files[0]);
};

另外，所有ids都必须是uniq

<div class="form-group">
  <p><input type="file"  accept="image/*" name="company_one" id="file" onchange="loadFile(event, 'output-1')" 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="file2" onchange="loadFile(event, 'output-2')" style="display: none;"></p>
  <p><label class="btn btn-success" for="file2" 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="file3" onchange="loadFile(event, 'output-3')" style="display: none;"></p>
  <p><label class="btn btn-success" for="file3" 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

https://jsfiddle.net/wdfaLbur/