CODEWITHSUNDEEP
javascriptjqueryfile-uploadupload
Sasa1234
Sasa1234

Reputation: 948

Preview an image before it is uploaded - Not Woking

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>

Upvotes: 3

Views: 1515

Answers (3)

mikey
mikey

Reputation: 1313

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 :).

Upvotes: 0

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

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>

Upvotes: 1

Fearodin
Fearodin

Reputation: 144

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>

Upvotes: 1

Related Questions