1

我正在为文件附件创建一个模式：

在此处输入图像描述

我正在使用 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" 替换另一个文件选择后的值。

我想多次使用文件选择并发布所有选定的文件。

我搜索了一下，输入 type="file" 没有设置器，但我需要一个输入 type="file" 并选择所有文件。我正在尝试找出一个#upload-anexo-final使用可见输入 ( ) 填充的输入 type="file" hidden ( )的解决方案#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>

我怎么解决这个问题？谢谢。

4

1 回答 1

1

这种方法怎么样。你有文件选择器。选择文件时，执行 UI 操作（将文件添加到文件列表），然后克隆文件选择器并为其添加特定名称 ( upload-nexo)。然后，在服务器端，您可以遍历 filesupload-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>

于 2018-05-17T20:13:40.283 回答