javascript - 文件上传并显示在 div 多个

Question

我创建了一个函数来从输入类型="file"中选择图像，并在 div 上显示上传的文件，但问题是会有多个输入文件，就像我捆绑了 3 个输入文件一样，但问题是我面对的是只有 1 张图片在显示，另外 2 张没有显示。

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

    reader.onload = function(e) {
      $('#head_shot').attr('src', e.target.result);
    }

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

$("#head").change(function() {
  head(this);
});

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

    reader.onload = function(e) {
      $('#side_profile').attr('src', e.target.result);
    }

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

$("#side_profile").change(function() {
  side_profile(this);
});


function full(input) {
  if (input.files && input.files[0]) {
    var reader3 = new FileReader();

    reader3.onload = function(e) {
      $('#full').attr('src', e.target.result);
    }

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

$("#full").change(function() {
  full(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="img-sec">
  <div class="container">
    <div class="col-sm-4">
      <div class="img-box">
        <h4>head shot</h4>
        <img id="head_shot" src="#" alt="your image" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="img-box">
        <h4>Side Profile</h4>
        <img id="side_profile" src="#" alt="your image" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="img-box">
        <h4>Full Length</h4>
        <img id="full" src="#" alt="your image" />
      </div>
    </div>
  </div>
</div>

<div class="picture_sec">
  <div class="container">
    <div class="lb-put">
      <label>Head Shot</label>
      <input type="file" class="form-control" name="head" id="head">
    </div>

    <div class="lb-put">
      <label>Side Profile</label>
      <input type="file" class="form-control" name="side_profile" id="side_profile">
    </div>

    <div class="lb-put">
      <label>Full Length</label>
      <input type="file" class="form-control" name="full" id="full">
    </div>
  </div>
</div>

Answer 1

为了解决您的问题，我将您的图像字段的 ID 更改为另一个值，因为它与您的文件输入的 ID 冲突。

General Rule : You cannot have elements with the same ID in DOM

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

    reader.onload = function(e) {
      $('#head_shot-img').attr('src', e.target.result);
    }

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

$("#head").change(function() {
  head(this);
});

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

    reader.onload = function(e) {
      $('#side_profile-img').attr('src', e.target.result);
    }

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

$("#side_profile").change(function() {
  side_profile(this);
});


function full(input) {
  if (input.files && input.files[0]) {
    var reader3 = new FileReader();

    reader3.onload = function(e) {
      $('#full-img').attr('src', e.target.result);
    }

    reader3.readAsDataURL(input.files[0]);
  }
}

$("#full").change(function() {
  full(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-sec">
  <div class="container">
    <div class="col-sm-4">
      <div class="img-box">
        <h4>head shot</h4>
        <img id="head_shot-img" src="#" alt="your image" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="img-box">
        <h4>Side Profile</h4>
        <img id="side_profile-img" src="#" alt="your image" />
      </div>
    </div>
    <div class="col-sm-4">
      <div class="img-box">
        <h4>Full Length</h4>
        <img id="full-img" src="#" alt="your image" />
      </div>
    </div>
  </div>
</div>

<div class="picture_sec">
  <div class="container">
    <div class="lb-put">
      <label>Head Shot</label>
      <input type="file" class="form-control" name="head" id="head">
    </div>

    <div class="lb-put">
      <label>Side Profile</label>
      <input type="file" class="form-control" name="side_profile" id="side_profile">
    </div>

    <div class="lb-put">
      <label>Full Length</label>
      <input type="file" class="form-control" name="full" id="full">
    </div>
  </div>
</div>

这是一个建议

我正在使用 Jquery Multifile没有问题。

1. 该插件允许您上传单个文件甚至多个文件。每一批上传都被分组并分配了一个关闭按钮，因此您只能删除特定文件。
2. 下一个不错的功能是图像预览。