javascript - ユーザー入力と同じ順序で画像を複数アップロードする

Question

画像ファイルの複数アップロードがありますが、以前直面していた問題は、画像がユーザーの入力とは異なる順序で表示されることでした。たとえば、ユーザーは Img1、Img2、Img3、Img4 を選択します。表示されるシーケンスは、Img2、Img4、Img3、Img1 の可能性があります。

これは、テキスト フィールド (画像の説明) にリンクする必要があり、各テキスト フィールドが正しい画像と一致する必要があるため、問題を引き起こします。私はいくつかの掘り下げを行い、ここでこのコードを使用して、同じ順序でアップロードされていることを確認できることを発見しました:

html

<input id="uploadfiles" multiple="multiple" name="photos" type="file">

JavaScript

$("#uploadfiles").change(function(){
    imgpreview(document.getElementById('uploadfiles').files);
});

function imgpreview(files) {
    var count = 0;
    for (var i = 0, f; f = files[i]; i++) {
        (function () {
            var div = $("<div></div>");
            var reader = new FileReader();
            $(".display").append(div);    

            reader.onload = function(e) { 
                div.append("<img id='photocount" + count + "' src='" + e.target.result + "' style='height:40px;width:auto;'></img>");
                count++;
            };

            reader.readAsDataURL(f);
        }());
    } 
}

こちらのフィドルでも利用できます: https://jsfiddle.net/L3d1L9t3/1/

この JavaScript コードは、画像が順番に表示されるようにします。ただし、画像の ID はまだ適切ではありません。たとえば、4 つの画像をアップロードする場合、id はそれぞれ photocount0、photocount1、photocount2、photocount3 にする必要があります。しかし、これは、各画像の要素を検査する場合には当てはまりません。

「カウント」も順番にあることを確認するにはどうすればよいですか? カウントをテキスト フィールド (画像の説明) にも一致させる必要があるため、これは重要です [「画像 1」は「画像の説明 1」とペアになり、「画像 2」は「画像の説明 2」とペアになります]