如何创建可以一次又一次添加文件的文件上传？答案

【问题标题】：How to create file uploading with a possibility of adding files again and again?如何创建可以一次又一次添加文件的文件上传？
【发布时间】：2018-08-18 07:09:11
【问题描述】：

我正在尝试执行类似下图所示界面的操作。单击加号我希望能够选择多个图像并在正方形内显示它们。然后，我想再次单击加号并添加更多图像，并将它们显示在新的正方形部分中。我想让用户选择他想要的文件数量。
IMAGE
现在我已经找到了单个文件的解决方案：

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
    
    $("#imgInp").change(function(){
        readURL(this);
    });

<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

【问题讨论】：

也许您需要添加另一个名为“添加”的按钮，
也许multiple 属性是一个可以考虑的选项？
使用URL.createObjectURL 比使用base64 更好，同步、更快、内存占用更少
@Endless 在这种情况下如何通过提交发送文件？希望提请注意，我不仅需要发送图像，而且我的表单中还有文本字段
为此使用FormData，附加您需要的所有文本/blob/文件并使用ajax发送formData。你可以这样做：new FormData(formElement)也

标签： javascript jquery html file-upload frontend

【解决方案1】：

let files = []; // once

if (input.files) {
    let files = [...files, ...input.files];
}

【讨论】：