0

我正在尝试自学一般的 Web 开发技能。我正在尝试使用 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 只适用于文档加载，我需要将它与文件点击相关联。

任何帮助将不胜感激。

4

1 回答 1

1

您的代码在第一次加载页面时准备好 DOM 时执行一次，因为页面永远不会重新加载，因此只会将change事件处理程序绑定到具有 id 的元素File1。当您切换到使用带有 id 的文件输入时，File2没有绑定到它的事件处理程序，因此选择文件什么都不做。

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

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

或者通过为每个元素添加一个类并基于它进行选择。

您还需要nextNum在适当的时候处理增加 的值，以便后续调用正确显示下一组元素。

于 2012-09-21T21:42:19.163 回答