
How to validate input type file size in jQuery for multiple records
You can validate input file size in jquery for multiple records by using $.each() method on file input array and validate each file by specifying the max file size limit.
Answers 1
-
Validate input type file size for multiple records in jQuery
<!-- HTML Input tag --> <input type="file" name="file" id="file" multiple /> <div id="resp"></div> <!--jQuery CDN with JavaScript Code --> <!-- jQuery CDN --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> var fileInput = document.getElementById('file'); fileInput.addEventListener("change", function(event){ let files = event.target.files; let ResponseTxt = ''; $(files).each(function(index, file) { if(file.size > 1048576){ ResponseTxt += 'File : '+file.name + ' is greater than 1MB. <br/>'; }else{ ResponseTxt += 'File : '+file.name + ' has a valid size. <br/>'; } }); document.getElementById('resp').innerHTML = ""; document.getElementById('resp').innerHTML += ResponseTxt; }); </script>
0
Random Code Snippet Queries: Jquery
- Jquery-3.6.0.min.js CDN link
- Ajax for multiple form
- Append method to add text to body not working
- How to get closest form input value in jQuery
- How to use and purpose of localstorage in javascript
- Ajax done fail ajaxcomplete in not a function
- How to check ajax request is completed in jQuery
- Uncaught TypeError: $.ajax is not a function
- Uncaught TypeError: $.ajaxSetup is not a function
- JQuery find text and show as bold in html page
- Add and remove input fields on click button using jQuery
- Get the href link on click anchor in javascript
- How to check object is empty or not in jQuery
- Preview image in base64 format using jQuery on change input file
- JQuery append html to below the target element
- How to create read more in jquery
- Execute function after Ajax call is complete
- How to remove Choose File button in jquery
- Jquery.validate.min.js:4 Uncaught TypeError: Cannot read properties of undefined (reading 'mode')
- How to find closest upper element and append html to below it in jquery
- Preview image in BLOB URL format on choose file in jQuery
- Mixed Content: The page at 'https://w3codegenerator.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint
- Show loading icon on click submit button in jQuery
- Enable click event on appended element using jQuery
- How to reset form input element on click