Breaking News: Grepper is joining You.com. Read the official announcement!

File Upload With Remove Button

Ayub Shah answered on February 9, 2023 Popularity 3/10 Helpfulness 1/10

answer File Upload With Remove Button

File Upload With Remove Button

Comment

// Multiple Files Upload Show



	var selDiv = "";
		
	document.addEventListener("DOMContentLoaded", init, false);
	
	function init() {
		document.querySelector('#files').addEventListener('change', handleFileSelect, false);
		selDiv = document.querySelector("#selectedFiles");
	}
		
	function handleFileSelect(e) {
		
		if(!e.target.files || !window.FileReader) return;
		
		selDiv.innerHTML = "";
		
		var files = e.target.files;
		var filesArr = Array.prototype.slice.call(files);
		if(filesArr.length > 4){
		  //  document.write("Select Upto 4 images only");
		  $(".upload-img-wraper").append(" <p  class='upload-imgErros'>❛❛ Select Upto 4 images Only. ❜❜ </p>");
		}
		else{
		    filesArr.forEach(function(f) {
			if(!f.type.match("image.*")) {
				return;
			}
	
			var reader = new FileReader();
			reader.onload = function (e) {
				var html = "<div class='image-box'><img src=\"" + e.target.result + "\"> <button class='remove-img-btn'>X</div>";
				selDiv.innerHTML += html;		
        $(".remove-img-btn").click(function(){
          $(this).parent(".image-box").remove();
        });		
			}
			reader.readAsDataURL(f); 
			
    		});

        
		}
		
		console.log('filesArr ', filesArr.length);
		
	}


  // Second Function With Jquery
  $(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")
    }
  });

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: button file-upload javascript

Link to this answer
Share Copy Link

Contributed on Feb 09 2023

Ayub Shah

0 Answers Avg Quality 2/10

File Upload With Remove Button

Contents

More Related Answers

File Upload With Remove Button

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.