Question

我正在使用fileuploadui（https://github.com/blueimp/jQuery-File-Upload）为我的网站上传文件，但我想让它只上传到1个文件，而不是多个文件。

我已从输入html标记中删除了“multiple”（输入类型=“文件”名称=“文件”），但队列仍然接受多个文件。

我的想法是，只要有人点击“浏览文件”按钮，它就会用新文件替换当前队列。它将永远是队列中的1个文件。

我如何使用replaceNode函数？

感谢。

Answer 1

试试这个：

$('#file_upload').fileUploadUIX({
    maxNumberOfFiles: 1
});

希望它有效^^

Answer 2

我在add函数中添加了以下内容：

$('#filelistholder').empty();

每次添加新文件时，这将清除文件列表容器，确保只留下最后一个文件。

希望它有所帮助。

因此完整代码如下所示：

<script type="text/javascript">
        $(function () {
            $('#fileupload').fileupload({
                dataType: "json",
                url: "/api/upload",
                limitConcurrentUploads: 1,
                maxNumberOfFiles: 1,
                sequentialUploads: true,
                progressInterval: 100,
                maxChunkSize: 10000,
                add: function (e, data) {
                    ///empty fie container every time a new file is added
                    $('#filelistholder').empty();
                    //add new file
                    $('#filelistholder').removeClass('hide');
                    data.context = $('<div />').text(data.files[0].name).appendTo('#filelistholder');
                    $('</div><div class="progress"><div class="bar" style="width:0%"></div></div>').appendTo(data.context);
                    $('#btnUploadAll').click(function () {
                        data.submit();
                    });

                },
                done: function (e, data) {
                    data.context.text(data.files[0].name + '... Completed');
                    $('</div><div class="progress"><div class="bar" style="width:100%"></div></div>').appendTo(data.context);
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#overallbar').css('width', progress + '%');
                },
                progress: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    data.context.find('.bar').css('width', progress + '%');
                }
            });
        });
    </script>

Answer 3

感谢@TopDev，

删除“多个”属性<input type="file" name="files[]">
将ID添加到表<tbody id="filelistholder" class="files">
在底部的循环内，添加{% for (var i=0, file; file=o.files[i]; i++) { %} {% $('#filelistholder').empty(); %}

Answer 4

回答角和打字稿（很容易适应非打字稿）。这对我有用。

ds.groupByKey(_.x)
  .mapGroups((_, iter) => iter.reduce((x, y) => x.copy(z = x.z + y.z)))
  .explain

//== Physical Plan ==
//*SerializeFromObject [staticinvoke(class org.apache.spark.unsafe.types.UTF8String, StringType, fromString, assertnotnull(input[0, $line15.$read$$iw$$iw$Foo, true]).x, true, false) AS x#37, staticinvoke(class org.apache.spark.unsafe.types.UTF8String, StringType, fromString, assertnotnull(input[0, $line15.$read$$iw$$iw$Foo, true]).y, true, false) AS y#38, assertnotnull(input[0, $line15.$read$$iw$$iw$Foo, true]).z AS z#39]
//+- MapGroups <function2>, value#32.toString, newInstance(class $line15.$read$$iw$$iw$Foo), [value#32], [x#8, y#9, z#10], obj#36: $line15.$read$$iw$$iw$Foo
//   +- *Sort [value#32 ASC NULLS FIRST], false, 0
//      +- Exchange hashpartitioning(value#32, 200)
//         +- AppendColumns <function1>, newInstance(class $line15.$read$$iw$$iw$Foo), [staticinvoke(class org.apache.spark.unsafe.types.UTF8String, StringType, fromString, input[0, java.lang.String, true], true, false) AS value#32]
//            +- *Project [_1#4 AS x#8, _2#5 AS y#9, _3#6 AS z#10]
//               +- *SerializeFromObject [staticinvoke(class org.apache.spark.unsafe.types.UTF8String, StringType, fromString, assertnotnull(input[0, scala.Tuple3, true])._1, true, false) AS _1#4, staticinvoke(class org.apache.spark.unsafe.types.UTF8String, StringType, fromString, assertnotnull(input[0, scala.Tuple3, true])._2, true, false) AS _2#5, assertnotnull(input[0, scala.Tuple3, true])._3 AS _3#6]
//                  +- Scan ExternalRDDScan[obj#3]

在控制器（打字稿）中

<span class="btn btn-success fileinput-button" type="reset" ng-click="ctrl.formReset(this)">
<i class="glyphicon glyphicon-plus"></i>
<span>Add file...</span>
<input type="file" name="file" ng-disabled="disabled">
</span>

maxNumberOfFiles：1，删除“multiple”并设置name =“file”也不是理想的。

Answer 5

如何将实际输入字段限制为单个文件上传？

<%= f.file_field :image, :multiple => false %>

Answer 6

这就是我做到的：

    //flag for limiting to 1 single file 
    var uploading;
    $('#file1').fileupload({
        dataType: 'json',
        done: function(e, data) {
        //...
        },
        progressall: function(e, data) {
        },
        add: function (e, data) {
            if (!uploading) {
                uploading = 1;
                console.log('add');
                data.submit();
            } else {
                console.log('cancel');
            }
        },
        always: function() {
            uploading = 0;
        },
        sequentialUploads: true
    });

jQuery FileUploadUI单个文件上传

6 个答案: