Question

我正在努力教自己一般的网络开发技巧。我正在尝试使用HTML5 FileAPI创建具有预览功能的图像上传。

到目前为止，我已创建了一个文件输入，可在选中时显示图像预览。

Html标记如下：

<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>

显示预览然后显示下一个“上传框”的Jquery如下：

<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>

但是，此代码仅首次出现...即选择文件时 - 显示预览，然后显示下一个“上传框”。但是，当我使用第二个文件浏览时，它不会显示任何预览。

从我准备好的，我需要关闭Jquery函数，以便它可以再次初始化，但我不知道该怎么做。

我的另一个猜测是，这个JQuery只处理文档加载，我需要将它与文件点击相关联。

任何帮助都将不胜感激。

Answer 1

当DOM第一次加载页面时，您的代码执行一次，因为页面不会重新加载，因此只会将change事件处理程序绑定到标识为{{{ 1}}。当您切换到使用标识为File1的文件输入时，没有绑定到它的事件处理程序，因此选择文件不会执行任何操作。

您还需要将事件处理程序绑定到其他文件输入元素，可能使用attribute-starts-with选择器：

File2

或者为每个元素添加一个类并根据它进行选择。

您还需要在适当的时候处理递增$('[id^="File"]').change(...);的值，以便后续调用正确显示下一组元素。

Jquery只在第一次工作

1 个答案: