JQuery - File attributes

Question

Trying to access file attributes from an input field after a file is selected. Tried this but get the error 'file not defined'

var file = $("#uploadedfile").prop("files")[0]; var fileName = file.fileName; var fileSize = file.fileSize; alert("Uploading: "+fileName+" @ "+fileSize+"bytes"); 

Answer 1

If #uploadedfile is an input with type "file" :

var file = $("#uploadedfile")[0].files[0]; var fileName = file.name; var fileSize = file.size; alert("Uploading: "+fileName+" @ "+fileSize+"bytes"); 

Normally this would fire on the change event, like so:

$("#uploadedfile").on("change", function(){    var file = this.files[0],        fileName = file.name,        fileSize = file.size;    alert("Uploading: "+fileName+" @ "+fileSize+"bytes");    CustomFileHandlingFunction(file); }); 

FIDDLE

Answer 2

<form id = "uploadForm" name = "uploadForm" enctype="multipart/form-data">     <label for="uploadFile">Upload Your File</label>      <input type="file" name="uploadFile" id="uploadFile">                   </form> <script>     $('#uploadFile').change(function(){         var fileName = this.files[0].name;         var fileSize = this.files[0].size;         var fileType = this.files[0].type;         alert('FileName : ' + fileName + '\nFileSize : ' + fileSize + ' bytes');     }); </script> 

Note: To get the uploading file name means then use jquery val() method.

For Ex:

var fileName = $('#uploadFile').val(); 

I checked this above code before post, it works perfectly.!