Multi File upload "files[]" javascript validation

Question

On my site I have multi file upload form with fields:

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

and I want to validate this fields with javascript code, I know how to get value for some simple fields with javascript but I don`t know how to get values from this fields with names "files[]", how javascript see this fields, array or...? How to apply validation of size and file type using javascript

Not quite get it, but I assume you want to select the DOM? Try change the id to class, since you cannot have multiple IDs, and use document.getElementsByClassName("files") to select the DOM. — Jamie Phan
– Jamie Phan, Commented Mar 8, 2017 at 12:39
Hope it can help somebody stackoverflow.com/questions/64663160/… — Ray Coder
– Ray Coder, Commented Dec 22, 2020 at 16:32

Bhavik vora · Accepted Answer · 2017-03-09 06:29:22Z

<!DOCTYPE html>
<html>
<body>
<input name="files[]" type="file" id="files[]" size="30" />
<input name="files[]" type="file" id="files[]" size="30" />
<input name="files[]" type="file" id="files[]" size="30" />
<button onclick="myFunction()">Get File Name-Type-Size</button>
<script>
function myFunction() {
    var input, file;

    if (!window.FileReader) {
        bodyAppend("p", "The file API isn't supported on this browser yet.");
        return;
    }

    var input=document.getElementsByName('files[]');
	for(var i=0;i<input.length;i++){
		   var file = input[i].files[0];
			bodyAppend("p", "File " + file.name + " is " + formatBytes(file.size) + " in size"+" & type is "+ fileType(file.name));    
		}
	}

	//function to append result to view
	function bodyAppend(tagName, innerHTML) {
		var elm;

		elm = document.createElement(tagName);
		elm.innerHTML = innerHTML;
		document.body.appendChild(elm);
	}
	
	//function to find size of file in diff UNIT
	function formatBytes(bytes,decimals) {
	   if(bytes == 0) return '0 Byte';
	   var k = 1000;
	   var dm = decimals + 1 || 3;
	   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
	   var i = Math.floor(Math.log(bytes) / Math.log(k));
	   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
	}

	//function to find file type
	function fileType(filename){
		return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) : undefined;
	}
</script>

</body>
</html>

Check this now you can put conditions on type of file & size.

Ravshanbek Ahmedov · Accepted Answer · 2017-03-08 12:43:37Z

0

// Try this jQuery ;)
$("form").on('change', 'input[type=file]', function() {
    var file;
    var this = $(this);
    if (file = this.files[0])
    {
        var img = new Image();

        img.onload = function () {
            // correct 
            // check alert(img.src)
        }

        img.onerror = function () {
            //error info
        };

        img.src = _URL.createObjectURL(file);
    }
}

answered Mar 8, 2017 at 12:43

Ravshanbek Ahmedov

2816 silver badges9 bronze badges

Comments

Bhavik vora · Accepted Answer · 2017-03-08 12:48:37Z

0

<!DOCTYPE html>
<html>
<body>




<input name="files[]" type="file" id="files[]" size="30" />
<input name="files[]" type="file" id="files[]" size="30" />
<input name="files[]" type="file" id="files[]" size="30" />
<button onclick="myFunction()">Get File Type</button>
<script>

function myFunction() {
var file=document.getElementsByName('files[]');
for(var i=0;i<file.length;i++){
console.log(file[i].value);
}

}
</script>

</body>
</html>

you can get files name like this.

answered Mar 8, 2017 at 12:48

Bhavik vora

2741 gold badge3 silver badges10 bronze badges

1 Comment

Divesh choudhary Over a year ago

Thanks But how can apply image size validation and type validation

Divesh choudhary · Accepted Answer · 2017-03-10 06:04:08Z

Thanks Bhavik vora But already done with this one

   <html>
    <head>
    <title>client-side image (type/size) upload validation</title>
    <meta charset=utf-8>
    <style>
    </style>
    </head>
    <body>
    <form><fieldset><legend>Image upload</legend>
    <input type="file"  name="file[]" onchange="getImg(this,100,'jpeg|png')">
    <input type="file"  name="file[]" onchange="getImg(this,100,'jpeg|png')">  
    </fieldset>
    </form>
    <script>
    function getImg(input,max,accepted){
        var upImg=new Image(),test,size,msg=input.form;
        msg=msg.elements[0].children[0];

        return input.files?validate():
        (upImg.src=input.value,upImg.onerror=upImg.onload=validate);
            "author: b.b. Troy III p.a.e";
        function validate(){
            test=(input.files?input.files[0]:upImg);
            size=(test.size||test.fileSize)/1024;
            mime=(test.type||test.mimeType);
        mime.match(RegExp(accepted,'i'))?
        size>max?(input.form.reset(),msg.innerHTML=max+"KB Exceeded!"):
        msg.innerHTML="Upload ready...":    
        (input.form.reset(),msg.innerHTML=accepted+" file type(s) only!")
        }
    }
    </script> 
    </body>
    </html>

Collectives™ on Stack Overflow

Multi File upload "files[]" javascript validation

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related