Question

我正在尝试创建一个文件上传表单，并且已经能够成功完成。我还添加了一个jquery片段来显示每个所选文件的名称，大小和mime。

我无法解决的是， 1 - 当我决定在上传之前向表单添加更多文件时，如何保留所选文件？所以我选择文件，关闭对话框，再次单击文件输入按钮并选择更多文件。标准行为将覆盖已选择的内容。我想保留我选择的内容并添加更多内容。

2-如何从选择中删除一些选定的文件而不重置整个选择？

这是我的表单字段：

    <input id="files" type="file" multiple="" name="files[]" class="green btn"/>

这是我的jquery片段：

<script>
$(document).ready(function(){
    $('#file_list').html('\
        <div class="portlet box yellow">\
            <div class="portlet-title">\
                <div class="caption">\
                    <i class="fa fa-reorder"></i>Project Attachments\
                </div>\
                <div class="tools">\
                    <a href="#" class="collapse"></a>\
                </div>\
            </div>\
            <div class="portlet-body">\
                <table id="files_table" class="table table-striped table-hover">\
                   <thead>\
                    <th>File</th>\
                    <th>File Name</th>\
                    <th>File Size</th>\
                    <th>File Creation Date</th>\
                   </thead>\
                   <tbody>\
                   </tbody>\
                 </table>\
             </div>\
        </div>\
    ');
    $('#files').on('change', function(){
        var fileList = this.files;
        var numFiles = this.length;


        for (var i = 0, numFiles = fileList.length; i < numFiles; i++) {
            var file = fileList[i];
            $('#file_list #files_table tbody').append('\
            <tr>\
                <td></td>\
                <td>'+file.name+'</td>\
                <td>'+file.size+'</td>\
                <td>'+file.type+'</td>\
            </tr>\
        ');
        }
    });
});

我已经玩了2天了，我已经走到了尽头。任何帮助将不胜感激!!

Answer 1

我想lib会很容易解决你的问题。

https://plugins.jquery.com/blueimp-file-upload-jquery-ui/

Answer 2

找到一种方法将.selected属性添加到this.files对象中的每个文件。

为每个HTML输入添加一个onclick函数，根据.checked的HTML输入值调整this.files中特定文件的.selected属性

在for循环中沿

行添加if语句

if ( file.selected )
{
    continue;
    // or something
}

jquery文件输入添加

2 个答案: