Testing whats to be uploaded

I have a form where I only want images to be selected for upload, ,after selecting an image, heres what I have so far…


As you can see A lot is wrong, heres the script

var control = document.getElementById("pic1")
var output = document.getElementById("Image1");
control.addEventListener("change", function(event) {
//display the container for all images
document.getElementById('All-images').style.display = "block";
//preview the image
output.style.display = "inline";
var type  = control.files[0].type;
var size = control.files[0].size;
console.log ("Type: "+type);
console.log ("Size :"+size);
	  
var result = document.getElementById("result1");
  	if(type=="image/*" && size <= 5000000)
  	{
    result.innerHTML = '<span style="color:green; padding-top:5px" class="glyphicon glyphicon-ok" aria-hidden="true"></span>';
	} else {
    result.innerHTML = '<span style="color:red; padding-top:5px" class="glyphicon glyphicon-remove" aria-hidden="true"></span>';
	}
});

As you can see, the console log worked, so if both conditions have been met, why is the red x being shown?

I’m not so sure both conditions are met.

If you temporarily change the conditional to be like this is there a difference?

var result = document.getElementById("result1");
//  	if(type=="image/*" && size <= 5000000)
  	if(size <= 5000000)
  	{

ok made the change to the if statement

	  console.log ("Type: "+type);
	  console.log ("Size :"+size+" bytes");
	  console.log(size <= 500000);
	  var result = document.getElementById("result1");
	  	if( size <= 500000)

the result


I tested a couple of images and it appears to work, but is there a way to test the mime type to be sure its an image?

ok, I got it to work using

if( type.split('/')[0]=='image' && size <= 500000)

thanks

1 Like

since I get 6 images, is it ok to change

	  var control = document.getElementById("pic1")
	  var output = document.getElementById("Image1");

	  control.addEventListener("change", function(event) {
	  //display the container for all images
	  document.getElementById('All-images').style.display = "block";
	  //preview the image
	  output.style.display = "inline";
      var type  = control.files[0].type;
	  var size = control.files[0].size;
	  //console.log ("Type: "+type);
	  //console.log ("Size :"+size+" bytes");
	  //console.log(size <= 500000);
	  var result = document.getElementById("result1");
	  	if( type.split('/')[0]=='image' && size <= 500000)
	  	{
	    result.innerHTML = '<span style="color:green; padding-top:5px" class="glyphicon glyphicon-ok" aria-hidden="true"></span>';
		} else {
	    result.innerHTML = '<span style="color:red; padding-top:5px" class="glyphicon glyphicon-remove" aria-hidden="true"></span>';
		alert("You have to select an image which is less than 500Kb!");
		}
 	});
to
	  var control1 = document.getElementById("pic1")
	  var output1 = document.getElementById("Image1");

	  var control2 = document.getElementById("pic2")
	  var output2 = document.getElementById("Image2");

	  var control3 = document.getElementById("pic3")
	  var output3 = document.getElementById("Image3");

	  var control4 = document.getElementById("pic4")
	  var output4 = document.getElementById("Image4");

	  var control5 = document.getElementById("pic5")
	  var output5 = document.getElementById("Image5");

	  var control6 = document.getElementById("pic6")
	  var output6 = document.getElementById("Image6");

	  control1.addEventListener("change", onlyImage(event);
	  control2.addEventListener("change", onlyImage(event);
	  control3.addEventListener("change", onlyImage(event);
	  control4.addEventListener("change", onlyImage(event);
	  control5.addEventListener("change", onlyImage(event);
	  control6.addEventListener("change", onlyImage(event);

          function onlyImage()  {
	  //display the container for all images
	  document.getElementById('All-images').style.display = "block";
            for($i=1; $i>6; $i++) {

	     //preview the image
	    output+$i.style.display = "inline";
            var type+$i  = control.files[$i-1].type;
	    var size+$i = control.files[$i-1].size;


	  var result+$i = document.getElementById("result+$i");
	  	if( type+$i.split('/')[0]=='image' && size+$i <= 500000)
	  	{
	    result+$i.innerHTML = '<span style="color:green; padding-top:5px" class="glyphicon glyphicon-ok" aria-hidden="true"></span>';
		} else {
	    result+$i.innerHTML = '<span style="color:red; padding-top:5px" class="glyphicon glyphicon-remove" aria-hidden="true"></span>';
		alert("You have to select an image which is less than 500Kb!");
		}
 	}

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