The example described below does not work in some mobile browsers (for example: android 6.0.1 Chrome 58.0.3029.83)

HTML:

<form action="" id="iForm"> <input type="file" multiple name="files" id="iFiles" accept="image/*" /> </form>

Js:

 $('#iForm').on('change', 'input#iFiles', function(e){ e.preventDefault(); return false; });

After 5-10 seconds after selecting the files (pictures in my case), the browser stumbles the "Opany ..." error or reloads the page or the browser completely hangs.

How can this be fixed?

If you increase the JS code to:

 $('#iForm').on('change', 'input#iFiles', function(e){ e.preventDefault(); var files = this.files; for (var key in files) { if (parseInt(key) >= 0) { console.log(files[key]); console.log({ fileName : files[key].name, fileType : files[key].type, fileSize : files[key].size }); } } return false; });

You can see via Remote Devices that the first console.log returns an empty object in the loop, but the second console.log returns the name, type and size of the current file (the size in cases with android 6.0.1 Chrome 58.0.3029.83 is 0 bytes)

    0