Image does not display on <input type = "file"> Android 4.0.4
I want to upload an image using html, but always fails. I check through console.log and generates below messages.
07-31 19:09:07.071: I/Web Console(16417): size:66797 at file:///android_asset/www/index.html:18 07-31 19:09:07.091: I/Web Console(16417): lastModifiedDate:Tue Jul 30 2013 03:44:18 GMT+0700 (WIT) at file:///android_asset/www/index.html:18 07-31 19:09:07.101: I/Web Console(16417): fileSize:66797 at file:///android_asset/www/index.html:18 07-31 19:09:07.111: I/Web Console(16417): name:1375130658314.jpg at file:///android_asset/www/index.html:18 07-31 19:09:07.121: I/Web Console(16417): type: at file:///android_asset/www/index.html:18 07-31 19:09:07.121: I/Web Console(16417): fileName:1375130658314.jpg at file:///android_asset/www/index.html:18 07-31 19:09:07.121: I/Web Console(16417): webkitSlice:function webkitSlice() { [native code] } at file:///android_asset/www/index.html:18 I found that the "type" property is empty. This happened in android 4.0.4.
But everything is in order on 4.1.2 and 4.1.3.
Are there any tips on this issue?
-
<!doctype html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>Image preview example</title> <script type="text/javascript"> oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; oFReader.onload = function (oFREvent) { document.getElementById('preview').src = oFREvent.target.result; }; function loadImageFile() { if (document.getElementById("uploadImage").files.length === 0) { return; } var oFile = document.getElementById("uploadImage").files[0]; for(var x in oFile) console.log(x+":"+oFile[x]); oFReader.readAsDataURL(oFile); } </script> </head> <body > <form name="uploadForm"> <table> <tbody> <tr> <img id="preview" style="width: 100px; height: 100px;" src="" alt="Image preview" /> <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile()" /></td> </tr> </tbody> </table> <p><input type="submit" value="Send" /></p> </form> </body> </html> Have you tried this? <input type="file" name="photo" accept="image/*" capture="camera">
Got it from here: Does the android web browser allow only photos to be downloaded from the camera?
Problems (were they?): Https://code.google.com/p/android/issues/detail?id=2519
I tried it once for an application based on PhoneGap for Android, but didn’t get it to work (I didn’t try the html line above. I found on the Internet that at that moment it was impossible (it was uploading an image to use as an avatar in the application and on the website).