w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Problems while previewing image before upload on mobile browser, works fine on desktop browser

Modified another code snippet for it to work properly on browser. The code snippet, I modified is mentioned at the link below.
Preview an image before it is uploaded

Below is the code snippet which work properly on both desktop browser as well as mobile browser.

<!DOCTYPE html>
<html>
<head>
    <title>File  API- FileReader as Data URL</title>
</head>
<body>
    <input type='file' id="imgInp" />
    <img id="myImage" src="#" alt="your image" />
</body>

<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            document.getElementById('myImage').src=e.target.result;
        }
        reader.readAsDataURL(input.files[0]);
    }
}
document.getElementById('imgInp').addEventListener("change",(function(e){
    readURL(this);
}));
</script>
</html>




© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.