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.

Any help will be grateful.