Upload Preview Script Issue

JavaScript
1

I have a problem with my upload preview script which I can’t find. Whenever I click on the upload image button and select for example 3 images at once, It uploads without a giving an error all the images to my database. But When I choose the images one after the other, It just uploads one image to my database.

I tried to test it using echo count($_files) and exit function and it’s clearly not the php part having a problem.

var count = 0;

function handleFileSelect(evt) {
  var $fileUpload = $("input#Photofile[type='file']");
  count = count + parseInt($fileUpload.get(0).files.length);

  if (parseInt($fileUpload.get(0).files.length) > 4 || count > 3) {
    alert("You can only upload a maximum of 3 photos");
    count = count - parseInt($fileUpload.get(0).files.length);
    evt.preventDefault();
    evt.stopPropagation();
    return false;
  }
  var files = evt.target.files;
  for (var i = 0, f; f = files[i]; i++) {
    if (!f.type.match('image.*')) {
      continue;
    }
    var reader = new FileReader();

    reader.onload = (function(theFile) {
      return function(e) {
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb mrm mts" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
        document.getElementById('list').insertBefore(span, null);
      };
    })(f);

    reader.readAsDataURL(f);
  }
}

$('#Photofile').change(function(evt) {
  handleFileSelect(evt);
});

$('#list').on('click', '.remove_img_preview', function() {
  $(this).parent('span').remove();

  //this is not working...
  var i = array.indexOf($(this));
  if (i != -1) {
    array.splice(i, 1);
  }
  // tried this too:
  //$(this).parent('span').splice( 1, 1 );

  count--;
});

form .post-image-collection {
  margin: -20px 0px 0px -20px;
  overflow: hidden;
}

form .post-image {
  position: relative;
  float: left;
  height: 152px;
  width: 170px;
  background: #f2f2f2;
  border: 1px dashed #ccc;
  padding: 0;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}

.mrm {
  margin-right: 20px;
}

.mts {
  margin-top: 10px;
}

form .post-image img {
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  vertical-align: top;
  border-radius: 3px;
  overflow: hidden;
}

form .post-image .icon-camera {
  display: none;
}

form .post-image input {
  position: absolute;
  z-index: 2;
  opacity: 0;
  width: 100%;
  height: 100%;
}

form .post-image.empty {
  position: relative;
  float: left;
  height: 130px;
  width: 130px;
  background: #f2f2f2;
  border: 1px dashed #ccc;
  padding: 0;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  vertical-align: top;
}

form .post-image.empty .icon-camera {
  display: block;
  height: 30px;
  line-height: 30px;
  left: 40%;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 30px;
  cursor: inherit;
  margin: -15px 0px 0px -15px;
}

form .post-image.empty .icon-camera img {
  height: 60px;
  width: 60px;
}

form .post-image.empty input {
  cursor: pointer;
}

form .post-image p,
.file_container-orange p {
  margin: 10px 0;
  margin: 1rem 0;
  text-align: center;
  font-family: "OpenSansSemiBold", sans-serif;
}

.uppercase {
  text-transform: uppercase;
}

#list {
  float: left;
}

.thumb {
  height: 130px;
  width: 130px;
  margin-right: 20px;
  margin-top: 10px;
}

.remove_img_preview {
  position: relative;
  top: -46px;
  right: 40px;
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  background: white;
  border-radius: 0px 0px 0px 3px;
  text-align: center;
  cursor: pointer;
}

.remove_img_preview:before {
  content: "×";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="row row-images">
    <label for="image">Images*</label>
    <div class="column image_container">
      <div class="post-image-collection">
        <label id="list"></label>
        <label class="post-image post-image-placeholder mrm mts empty">
          <input type="file" id="Photofile" name="images[]" required="required" multiple />
          <span class="icon-camera"><img src="https://cdn.onlinewebfonts.com/svg/img_134042.png"></span>
          <p class="uppercase">Photo</p>
        </label>
      </div>
    </div>
</form>

Please can someone check my script and tell me what might be the problem?

2

When you choose another image separately, it will replace the current file – it’s just the thumbnail that remains. So what you’d have to do is to insert another file input element (just take care to keep the IDs unique)… like e.g.

<form>
  <input type="file" name="images[]" multiple required>
</form>

<ul class="previews"></ul>

var $previews = $('.previews')

// Iteratee to create previews for all files
var createPreviews = function (index, file) {
  var $preview = $('<img />', {
    src: URL.createObjectURL(file)
  })

  var $item = $('<li />').append($preview)

  $previews.append($item)
}

// Event handle when files got selected
var handleFileSelect = function (event) {
  var target = event.target
  var $target = $(target)

  $.each(target.files, createPreviews)

  // This is the important bit: clone the input
  // element and hide the old one
  $target.clone().insertAfter(target)
  $target.hide()
}

// Use event delegation so we don't have to bind new change
// listeners to each newly created file input
$('form').on('change', '[name="images[]"]', handleFileSelect)

Here’s a fiddle.

BTW, I’d suggest to use either this approach or the option to select multiple files at once, not both of them… otherwise it might be somewhat confusing for the user. Also you don’t have to keep track of which preview belongs to which file input yourself. :-)

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.