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”会在另一个文件选择之后替换值。

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

我搜索过它，输入type =“file”没有setter，但是我需要一个输入类型=“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数组进行迭代，并获取每个文件选择器的所有文件。

＆＃13;

$(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));
        
    }
});

＆＃13;

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

＆＃13;

连续文件选择上传

1 个答案: