有没有办法在提交到服务器之前向文件上传添加其他文件？答案

【问题标题】：Is there a way to add additional files to file upload before submitting to server ?有没有办法在提交到服务器之前向文件上传添加其他文件？
【发布时间】：2018-12-19 20:08:33
【问题描述】：

使用简单的输入控件：

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

有没有办法使用 JavaScript/Jquery 进行自定义，以允许在第二次和第三次“浏览”按钮单击时添加其他文件？（在单击“提交最终”按钮之前）。在服务器端，我使用的是 Microsoft MVC。

谢谢。

我已经尝试了一些 jquery 插件，但找不到合适的。

在单击“提交最终”按钮之前不想提交到服务器。

【问题讨论】：

您能否详细说明用例以及用户将如何使用它？如果他们不小心将错误的文件添加到上传列表中怎么办？如果只有 1 个控件始终将文件附加到要上传的文件列表中，那么他们将无法在不重新加载页面的情况下清除该列表......或者我可能误解了你
这是一个很好的观点。我想出了一个解决方案并将其发布。

标签： jquery html asp.net-mvc

【解决方案1】：

想出了一个解决办法：

<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>

【讨论】：

【解决方案2】：

您可以在用户提交表单之前设置任何显示图像的前端显示。我添加了一些适用于这个用例的 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>

【讨论】：