JQuery Fileupload仅包含表单数据和单个文件

Question

我正在尝试让JQuery fileupload在我们的网站上运行。 现在，我们需要在文件上传的同时提交数据，并且只允许上传一个文件。 最后，我不知道怎么做是从jquery fileupload中清除先前添加的文件，并确保只有1个文件和1个请求被发送到服务器。 缩小表格的版本。

<form enctype="multipart/form-data" id="TestCreateForm" method="post">
<label for="Form_staffMember">Staff Member</label>
<input id="Form_staffMember" name="Form.staffMember" type="text" />

<input id="FileUpload" name="FileUpload" type="file" value="" />

<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
<!-- The global progress bar -->
<div id="progress" class="progress">
    <div class="progress-bar progress-bar-success"></div>
</div>

<div class="form-group">
    <div>
        <button class="btn btn-default">Upload</button>
    </div>
</div></form>

当前的Javascript

<script>
    $(function () {
        var sendData = true;
        $('#FileUpload').fileupload({
            dataType: 'json',
            autoUpload: false,
            add: function (e, data) {
                console.log('add');
                var clearOldData = true;
                $('#TestCreateForm button').on('click', function () {
                    //alert('TestCreateForm button click');
                    //data.abort();
                    if (sendData) {
                        var serialArray = $('#TestCreateForm').serializeArray();
                        data.formData = serialArray; //$('#TestCreateForm').serializeArray();
                        sendData = false;
                    }
                    data.submit();
                    clearOldData = false;
                });
                if (clearOldData) {
                    $("#files").empty();
                }
                $.each(data.files, function (index, file) {
                    var filename = file.name;
                    $('<p/>').text(filename).appendTo('#files');
                });
            },
            done: function (e, data) {
                sendData = true;
                console.log('done');
                /*$.each(data.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo('#files');
                });*/
            },
            progressall: function (e, data) {
                console.log('Progressall');
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }
        }).prop('disabled', !$.support.fileInput)
    .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });
</script>

Answer 1

我的文件上传字段旁边有一个垃圾箱按钮，但是您可以尝试使用下载模板，如您在此处看到的。完成文件上传后，我向我的应用程序发送了一个ID来标识文件，因此我可以使用如果需要，可以将其从ajax调用中删除。

限制为仅一个文件也很容易：我使用添加事件来首先检查我的文件字段是否具有文件ID（因此，该字段将被填充）。 如果没有，我开始上传文件。

请检查此 API 和此添加回调

希望这可以帮到你。

问候