Question

I am trying to teach myself general web development skills. I am trying to create a image upload with preview functionality using HTML5 FileAPI.

Till now, I have created a file input which shows the preview of image when selected.

Html mark up is below:

<div>
        <!-- Photos -->
        <fieldset>
            <legend>PropertyPhotos</legend>
            <div class="upload-box" id="upload-box-1">
                <div class="preview-box">
                    <img alt="Field for image cutting" id="preview_1" src="@Url.Content("~/Content/empty.png")" />
                </div>
                <div>
                    @Html.FileFor(model => model.File1)
                    @Html.ValidationMessageFor(model => model.File1)
                </div>
            </div>

            <div class="upload-box" id="upload-box-2">
                <div class="preview-box">
                    <img alt="Field for image cutting" id="preview_2" src="@Url.Content("~/Content/empty.png")" />
                </div>
                <div>
                    @Html.FileFor(model => model.File2)
                    @Html.ValidationMessageFor(model => model.File2)
                </div>
            </div>

            <div class="upload-box" id="upload-box-3">
                <div class="preview-box">
                    <img alt="Field for image cutting" id="preview_3" src="@Url.Content("~/Content/empty.png")" />
                </div>
                <div>
                    @Html.FileFor(model => model.File3)
                    @Html.ValidationMessageFor(model => model.File3)
                </div>
            </div>
        </fieldset>
    </div>

The Jquery to show preview and then display the next “upload-box” is as follows:

<script type="text/javascript">
        $(document).ready(function () {
            // show first box
            $("#upload-box-1").fadeIn();

            //Get current & next step index
            var stepNum = $('div.upload-box').attr('id').replace(/[^\d]/g, '');
            var nextNum = parseInt(stepNum)+1;

            //Get the preview image tag
            var preview = $('#preview_'+stepNum);

            //Load preview on file tag change and display second upload-box
            $('#File'+stepNum).change(function (evt) {
                var f = evt.target.files[0];
                var reader = new FileReader();

                if (!f.type.match('image.*')) {
                    alert("The selected file does not appear to be an image.");
                    return;
                }

                reader.onload = function (e) { preview.attr('src', e.target.result); };
                reader.readAsDataURL(f);

                //Show next upload-box
                $("#upload-box-" + nextNum).fadeIn();
            });
        });
    </script>

However, this code only first for the first time … i.e. on selecting a file – It shows a preview and then shows the next “upload-box”. However, when I browse using the second file it doesn’t show any preview.

From what I have ready, I need to close the Jquery function so that it can be initialised again but I am not sure how to do that.

My other guess is that this JQuery is only working on document load and I need to associate it with file click.

Any help will be grateful.

Answer 1

Your code is executed once, when the DOM is ready the first time the page is loaded, because the page doesn’t ever reload and therefore will only bind a change event handler to the element with id File1. When you switch to using the file input with id File2 there’s no event handler bound to it, so selecting a file does nothing.

You’ll need to bind the event handler to the other file input elements as well, possibly using an attribute-starts-with selector:

$('[id^="File"]').change(...);

or by adding a class to each of those elements and selecting based on that.

You’ll also need to handle incrementing the value of nextNum when appropriate, so that subsequent calls display the next set of elements correctly.