Get File from Input field in Jquery

Question

If I have this code on my page then it works

index.html

<input type="file" name="data[Post][picture]"  hidden="1" onchange="uploadPhoto(this.files)" id="PostPicture"/>

script.js

function uploadPhoto(files){

    //TODO

    console.log(files);
}

but that code requires me to put uploadPhoto() function out of jquery $() function. I have certain problems with variable scope and so I don't want to get my function outside of document.ready function.

for that I did something like this

$(function(){
    var uploadPhoto = function(){


        //TODO

        console.log($('#PostPicture').files);
    };

    $('#PostPicture').on('change',uploadPhoto);
});

and it logs undefined in the console.

Answer 1

The jQuery results set does not have a files attribute, you need to access the element directly:

var files = $("#fileInput")[0].files;

or

var files = $("#fileInput").prop('files');

source: https://stackoverflow.com/a/13747921/441907