jquery - Filereader インターフェイスを使用して、アップロード前にファイルを削除する

Question

File API の Filereader を使用して、アップロード前にさまざまな画像のサムネイルを作成しています。各サムネイルに加えて、「削除」ボタンが作成されるため、ユーザーは不要な画像をアップロード前に削除できます。つまり、削除ボタンをクリックすると、オブジェクトは DOM から削除されますが、アップロードを押すと、以前に削除されたものであっても、選択されたすべての画像がアップロードされます。

アップロードの前にこれらの削除されたファイルを削除する方法を見つけようとしていますが、どこに保存されているのかわかりません。

私が使用しているスクリプトは次のとおりです。

$(window).load(function(){

var j = 0;

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e) {

                // Render thumbnail.
                var span = document.createElement('span');
                span.className = 'imageMask '+ j +'';
                span.innerHTML = ['<img class="thumb '+ j +'" src="', e.target.result,
                            '" title="', escape(theFile.name), '" /> <span class="deleteBtn" onClick="removeFunc(\'' + j + '\')">x</span>'].join('');
                j += 1;                  

                document.getElementById('list').insertBefore(span, null);

            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);



});

そして、ここに私が使用している削除機能があります:

function removeFunc(e){
    $('.imageMask.' + e).remove();
}

ご協力いただきありがとうございます！