Есть ли способ добавить дополнительные файлы для загрузки файлов перед отправкой на сервер?

Question

с помощью простого элемента управления вводом:

<input type="file" id="demo" multiple />
<input type="submit value="Submit Final" />

Есть ли способ настроить использование JavaScript / Jquery для добавления дополнительных файлов при втором и третьем нажатии кнопки «Обзор»?(до нажатия кнопки «Отправить финал»).На стороне сервера я использую Microsoft MVC.

Спасибо.

Я уже пробовал некоторые плагины jquery, но не смог найти подходящий.

не хотят отправлять на сервер, пока не нажата кнопка «Отправить окончательный вариант».

Answer 1

Вы можете настроить любой внешний интерфейс, который показывает изображения перед тем, как пользователь отправит форму.Я добавил несколько классов отображения bootstrap4, которые хорошо подходят для этого варианта использования.JQuery обрабатывает диалог выбора файла, а не кнопку отправки.

$('[file-upload]').change(function () {
    var File = this.files;

    if (File && File[0]) {
        ReadImage(File[0]);
    }
});
});

var ReadImage = function (file) {
var s = document.getElementById('UpdatedActionsFileUpload');
s.value = 'ReverseDelete';
var reader = new FileReader;
var image = new Image;
image.addEventListener('error', imagenotfound);
var imagenotfound = function () {
    alert("imagenotfound");
};

reader.readAsDataURL(file);
reader.onload = function (_file) {
    image.src = _file.target.result;
    image.onload = function () {
        $('[target-img]').attr('src', _file.target.result);

        $('[img-preview]').show();
    }
};
};
var ClearPreview = function () {
$('[file-upload]').val('');
$('[img-description]').text('');
$('#img-preview').css({ "visibility": "visible" });
$('[img-preview]').hide();
var s = document.getElementById('UpdatedActionsFileUpload');
s.value = 'Delete';
};

А затем некоторые HTML

<div img-preview class="thumbnail" style="display:none">
            <img class="img-fluid" target-img />
            <div class="caption">
                <a href="#in-form" onclick="ClearPreview()"><i class="fas fa-trash"></i> </a>
                <p img-description></p>
            </div>
        </div>

Answer 2

разобрался с решением:

<input type="file" class="files" id="files" name="files" multiple onchange="javascript:updateList()">

<div id="selectedFiles" style="margin-left:10px"></div>


<script>
updateList = function () {
    var input = document.getElementById('files');
    var output = document.getElementById('selectedFiles');

    var f = $("#selectedFiles").data("files");

    if (f != null) {


        for (var i = 0; i < input.files.length; i++) {
            f.push(input.files.item(i));

        }

        $("#selectedFiles").data("files", f);

    }
    else {
        var dFiles = new Array();
        for (var i = 0; i < input.files.length; i++) {
            dFiles.push(input.files.item(i));
        }

            $("#selectedFiles").data("files", dFiles);

    }


    var f = $("#selectedFiles").data("files");
    output.innerHTML = '<ul>';
    for (var i = 0; i < f.length; ++i) {

        if (validateFileExt(f[i].name))
            output.innerHTML += '<li>' + f[i].name + ' (' + f[i].size + ')' + '<a onclick="removeFile(this)" href="javascript:void(0);">&nbsp;remove</a>' + '</li>';
    }
    output.innerHTML += '</ul>';
}


</script>