Preview an image before it is uploaded - Not Woking

Question

I want to preview an image before it is uploaded.

I have tried many ways like this.

Image preview does not work.

I don't know where I did a mistake. I tried https://jsfiddle.net/lesson8/9NeXg/ and I have pasted my code.

Note : Fiddle Works fine, but when I copy fiddle to my page it did not work. I don't know what is my mistake.

   <!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<title>Untitled Document</title>
<script>
function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#image_upload_preview').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#inputFile").change(function () {
        readURL(this);
    });
</script>
</head>

<body>
   <form id="form1" runat="server">
    <input type='file' id="inputFile" />
    <img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
  </form>
</body>
</html>

well, the fiddle works fine to me, what exactly doesn't work to you? what happens? Did you check the console? — Fearodin, Feb 16 '16 at 07:26
@Fearodin I have copied fiddle to my page, thats only I did, but it does not work. I have written my code. Can you please try it. — Sasa1234, Feb 16 '16 at 07:32

score 1 · Accepted Answer · answered Feb 16 '16 at 07:46

Allright, the solution is just to put your script-code from the <head> to the <body> tag like so:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<title>Untitled Document</title>
</head>

<body>
   <form id="form1" runat="server">
    <input type='file' id="inputFile" />
    <img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
  </form>
<script>
function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#image_upload_preview').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#inputFile").change(function () {
        readURL(this);
    });
</script>  
</body>
</html>

score 1 · Answer 2 · answered Feb 16 '16 at 07:48

Your js is running before the DOM is ready. You have to put your js in $(document).ready().

<html>
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <title>Untitled Document</title>
    <script>
        $(document).ready(function () {
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('#image_upload_preview').attr('src', e.target.result);
                    }

                    reader.readAsDataURL(input.files[0]);
                }
            }

            $("#inputFile").change(function () {
                readURL(this);
            });
        });
    </script>
</head>

<body>
    <form id="form1" runat="server">
        <input type='file' id="inputFile" />
        <img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
    </form>
</body>
</html>

score 0 · Answer 3 · answered Feb 16 '16 at 07:50

Place your jQuery code in $(document).ready(function() { /* Here. */ }), create a separate JS file, and include this JS file with:

<head>
  <script type="text/javascript" src="test.js"></script>
</head>

This should resolve your issue.

For quick little prototypes, placing the JS straight into the HTML is mostly fine, but for anything more than a quick test case, it's generally recommended to split up your JS into separate files.

Glad your issue is resolved :).

Preview an image before it is uploaded - Not Woking

3 Answers3