vendredi 3 août 2018

how to develop image upload buttons display one by one to upload multiple images?

I am using laravel for my app. and I have image upload button with preview. this is html blade file,

<input type="file" id="files" name="files[]" multiple />

and java scripts is,

<script >
    $(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove image</span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function(){
            $(this).parent(".pip").remove();
          });
          });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});
</script>

now I need create file upload buttons to upload multiple images. I need maximum 5 buttons. need display buttons one after one (one image select to upload and second buttons). how can develop this system.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire