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>

ただし、このコードは最初だけです...つまり、ファイルを選択すると、プレビューが表示され、次の「アップロードボックス」が表示されます。ただし、2 番目のファイルを使用して参照すると、プレビューが表示されません。

私が準備したものから、Jquery関数を閉じて再度初期化できるようにする必要がありますが、その方法がわかりません。

もう 1 つの推測では、この JQuery はドキュメントの読み込みのみを処理しており、それをファイル クリックに関連付ける必要があります。

どんな助けでも感謝します。

4

1 に答える 1

1

ページが最初にロードされたときに DOM の準備ができたときに、コードが 1 回実行されます。これは、ページがリロードされないため、changeイベント ハンドラーが id の要素にのみバインドされるためFile1です。id でファイル入力を使用するように切り替えるとFile2、それにバインドされたイベント ハンドラーがないため、ファイルを選択しても何も起こりません。

おそらくattribute-starts-withセレクターを使用して、イベント ハンドラーを他のファイル入力要素にもバインドする必要があります。

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

または、これらの各要素にクラスを追加し、それに基づいて選択します。

nextNum後続の呼び出しで次の要素のセットが正しく表示されるように、必要に応じて の値をインクリメントする処理も行う必要があります。

于 2012-09-21T21:42:19.163 に答える