Mark Alan Mark Alan - 3 months ago 10
jQuery Question

File to upload and show on div multiple

I have a function created to select image from input type="file" and show that uploaded file on a div but the problem is that there will be multiple input file like it will be 3 input file I tied alot but the issue I am facing is only 1 image is showing and the other 2 are not showing.



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

To fix your issue I change the ID's of your image fields to another value because it is in-conflict with the ID's of your file input.

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>

This is a suggestion

I am using Jquery Multifile without a problem.

  1. The plugin allows you to upload single file or even multiple files. Every batch of uploads are grouped and assigned a close button so you can only remove specific files.
  2. The next nice feature is the preview of images.
Comments