javascript - 连续选择文件上传

Question

我正在为文件附件创建模式:

我正在使用 input type="file"并在我的 html 中插入选定的文件:

$("#upload-anexo").change(function() {

    var files = $(this)[0].files;
    for (var i = 0; i < files.length; i++) {

        var newLine = "<div class='anexo-line'>" +
                        "<div class='anexo-nome-arquivo'>" +
                        "<i class='icon-arrow-up anexo-uploaded'></i>" +
                        files[i].name +
                        "</div>" +
                        "<div class='anexo-actions'>" +
                        "<i class='icon-trash anexo-delete'></i>" +
                        "</div>" +
                        "</div>";

        $("#modal-anexos .modal-body").append(newLine);
    }
});

问题是 input type="file"替换了另一个文件选择后的值。

I want to use the file choose multiple times and post all the files selected.

我搜索了一下，input type="file"没有 setter，但我需要一个 input type="file"并选择了所有文件。我正在尝试找出一个解决方案，其中隐藏了输入类型 ="file"(#upload-anexo-final)，并使用可见输入(#upload-anexo)填充。

这是我的 HTML:

<div id="modal-anexos" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Attachments</h3>
    </div>
    <div class="modal-body">

        <input id="upload-anexo" type="file" multiple style="margin-bottom: 5px">
        <input id="upload-anexo-final" type="file" multiple style="display: none">

        <div class="anexo-line">
            <div class="anexo-nome-arquivo">
                <i class="icon-ok anexo-uploaded"></i>
                <a href="TODO">MyFile.pdf</a>
            </div>

            <div class="anexo-actions">
                <i class="icon-trash anexo-delete"></i>
            </div>
        </div>

    </div>
    <div class="modal-footer">
        <button id="btn-ok-anexos" class="btn azul">Save</button>
        <button class="btn cinza" data-dismiss="modal" aria-hidden="true">Cancel</button>
    </div>
</div>

我该如何解决这个问题？谢谢。

Answer 1

这种方法怎么样。你有文件选择器。选择文件时，执行 UI 操作(将文件添加到文件列表)，然后克隆文件选择器并为其添加特定名称 (upload-nexo)。然后，在服务器端，您可以遍历文件 upload-anexo 数组并获取每个文件选择器的所有文件。

$(document).on('change', '.upload-anexo:visible', function() {

    var files = $(this)[0].files;
    var newLine;
    
    for (var i = 0; i < files.length; i++) {

        newLine = "<div class='anexo-line'>" +
                    "<div class='anexo-nome-arquivo'>" +
                      "<i class='icon-arrow-up anexo-uploaded'></i>" +
                        files[i].name +
                    "</div>" +
                    "<div class='anexo-actions'>" +
                      "<i class='icon-trash anexo-delete'></i>" +
                    "</div>" +
                  "</div>";

        $("#modal-anexos .modal-body").append(newLine);
        
        // Clone the file selector, assign the name, hide and append it
        $(this).clone().hide().attr('name', 'upload-anexo[]').insertAfter($(this));
        
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal-anexos" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Attachments</h3>
  </div>
  <div class="modal-body">
    <input class="upload-anexo" type="file" multiple style="margin-bottom: 5px">
  </div>
  <div class="modal-footer">
    <button id="btn-ok-anexos" class="btn azul">Save</button>
    <button class="btn cinza" data-dismiss="modal" aria-hidden="true">Cancel</button>
  </div>
</div>