JQuery 包含表单数据且只有单个文件的文件上传

Question

我正在尝试在我们的网站上获取 JQuery 文件上传运行。现在我们需要在上传文件的同时提交数据，并且只允许上传 1 个文件。最后，我不知道该怎么做是从 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

我的文件上传字段旁边有一个垃圾桶按钮，但您可以尝试使用下载模板，如您所见here 当我完成文件上传后，我会向我的应用程序发送一个标识文件的 ID，这样我就可以在需要时使用它从 ajax 调用中删除它。

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

请检查this for API and这个，添加回调

希望对您有所帮助。

此致

JQuery 包含表单数据且只有单个文件的文件上传

JQuery Fileupload with form data and only single file

javascript

jquery

asp.net

file-upload

jquery-file-upload