How to Verify File Input Size with jQuery?

How to Verify File Input Size Using jQuery

Problem:

You want to implement client-side error reporting for oversized files in a file upload form using jQuery. You're wondering if it's possible to check the file size either locally or by sending it to the server.

Answer:

While direct file access is not available to JavaScript, the HTML5 File API exposes various file properties, including the file size.

Solution for Modern Browsers (HTML5 Compliant):

<code class="html"><input type="file" id="myFile" /></code>

<code class="javascript">$('#myFile').bind('change', function() {
  alert(this.files[0].size); // Gets the file size in bytes
});</code>

Support for Older Browsers:

Older browsers may not support the File API. Verify support before using the code:

<code class="javascript">if (window.File && window.FileReader && window.FileList && window.Blob) {
  // File API support detected, continue with the solution above
} else {
  // Fallback handling for older browsers
  // (e.g., display an error message or implement custom file size validation)
}</code>

The above is the detailed content of How to Verify File Input Size with jQuery?. For more information, please follow other related articles on the PHP Chinese website!