Checking file type using Javascript

Question

Checking file type using Javascript

I have a question regarding JavaScript validation. I check <input type="file"> when my scripts run, it checks, but the action page is also called. I want to stop the action page until validation is complete. Here is my code, any help would be awesome. Relations

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Image Uploading</title> </head> <body> <form name="xx" action="server.php" method="post" enctype="multipart/form-data" onsubmit="Checkfiles(this)"> <input type="file" name="file_uploading" id="filename"> <input type="submit" value="Submit" name="uploadfile"> </form> <form name="view" method="post"> <a href="view_server.php">View your uploaded Images</a> </form> </body> </html> <script type="text/javascript"> function Checkfiles() { var fup = document.getElementById('filename'); var fileName = fup.value; var ext = fileName.substring(fileName.lastIndexOf('.') + 1); if(ext =="GIF" || ext=="gif") { return true; } else { alert("Upload Gif Images only"); return false; } } </script>

+6

javascript

Zain Nov 22 '11 at 17:30

source share

7 answers

Mohw · Answer 1 · 2013-06-12T13:48:39+0000

 var fname = "the file name here.ext"; var re = /(\.jpg|\.jpeg|\.bmp|\.gif|\.png)$/i; if(!re.exec(fname)) { alert("File extension not supported!"); }

Jk · Answer 2 · 2011-11-22T17:32:52+0000

The return value of the send handler affects the view.

 onsubmit="return Checkfiles();"

It basically says:

 form.onsubmit = function () { return Checkfiles(); };

Bakudan · Answer 3 · 2011-11-22T17:51:03+0000

You can use File Api to check the magic number . Perhaps look at this answer for other validation ideas. More reliable than checking the file extension.

SLaks · Answer 4 · 2011-11-22T17:32:02+0000

You need to return CheckFiles()

Rajnesh thakur · Answer 5 · 2016-05-18T10:51:36+0000

Download bulk data through an excel sheet (.csv)

 $("form").submit(function(){ var val = $(this).val().toLowerCase(); var regex = new RegExp("(.*?)\.(csv)$"); if(!(regex.test(val))) { $(this).val(''); alert('Only csv file can be uploaded'); return false; } });

Ankit verma · Answer 6 · 2017-09-20T10:04:02+0000

Checking file extension using javascript

 function ValidateExtension() { var allowedFiles = [".doc", ".docx", ".pdf"]; var fileUpload = document.getElementById("fileUpload"); var lblError = document.getElementById("lblError"); var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$"); if (!regex.test(fileUpload.value.toLowerCase())) { lblError.innerHTML = "Please upload files having extensions: <b>" + allowedFiles.join(', ') + "</b> only."; return false; } lblError.innerHTML = ""; return true; }

the onclick submit button event calls this javascript function.

Use ID = lblError to print the error message in the html section.

Ravshanbek ahmedov · Answer 7 · 2016-10-16T11:35:16+0000

 var _URL = window.URL || window.webkitURL; $("input[type=file]").change(function(e) { var file; if ((file = this.files[0])) { var img = new Image(); img.onload = function () { // do to on load }; img.onerror = function () { alert("valid format " + file.type); }; img.src = _URL.createObjectURL(file); } });

Checking file type using Javascript

Checking file extension using javascript

More articles: