通过jQuery-File-Upload和Asp.net MVC Core提交没有任何文件的表单

问题描述

是否可以通过下面的jQuery-File-Upload提交没有任何文件的表单?

https://github.com/blueimp/jQuery-File-Upload/

我需要将文件上传设置为可选,并允许用户提交表单

我当前的文件如下:

HTML(ASP.NET视图)

    <form id="fileupload" action="@Url.Action("UploadFiles")" method="POST" enctype="multipart/form-data">
        <div>
            <div class="drop formContentSection" id="dropArea">                    
                <div class="fileupload-buttonbar">
                    <span class="btn fileinput-button button">
                        <span>Upload FILES</span>
                        <input type="file" name="file" multiple>
                    </span>
                    <span class="fileupload-process"></span>
                </div>

                <!-- The table listing the files available for upload/download -->
                <table role="presentation" class="table table-striped">
                    <tbody class="files">
                    </tbody>
                </table>
            </div>

        </div>

            <div class="fileupload-buttonbar">
                <button type="submit" class="start">SUBMIT</button>
            </div>  
    </form>
    
    
    <!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
    {% for (var i=0,file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade{%=o.options.loadImageFileTypes.test(file.type)?' image':''%}">
        <td>
            <p class="name">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valueNow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
        </td>
        <td>
            {% if (!i && !o.options.autoUpload) { %}
            <button class="btn btn-primary start hidden" disabled>
                <span>Start</span>
            </button>
            {% } %}

            {% if (!i) { %}
            <button class="btn btn-warning cancel btn-sharp">     
                <span>Cancel</span>
            </button>
            {% } %}
        </td>
    </tr>
    {% } %}
</script>

<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
    {% for (var i=0,file; file=o.files[i]; i++) { %}
    <tr class="template-download fade{%=file.thumbnailUrl?' image':''%}">
        <td>
            <p class="name">
                {% if (file.url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                {% } else { %}
                <span>{%=file.name%}</span>
                {% } %}
            </p>
            {% if (file.error) { %}
            <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <td>
            {% if (file.deleteUrl) { %}
            <button class="btn btn-danger delete btn-sharp" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}" {% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}' {% } %}>
                <span>Delete</span>
            </button>
            {% } else { %}
            <button class="btn btn-warning cancel">
                <span>Cancel</span>
            </button>
            {% } %}
        </td>
    </tr>
    {% } %}
</script>

JavaScript

    $(function () {
    'use strict';

    $('#fileupload').fileupload(
        {
            dataType: 'json',acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,singleFileUploads: false,autoUpload: false
        });

    $('#fileupload').addClass('fileupload-processing');
    $.ajax({
        url: $('#fileupload').fileupload('option','url'),dataType: 'json',context: $('#fileupload')[0]
    })
        .always(function () {
            $(this).removeClass('fileupload-processing');
        })
        .done(function (result) {
            $(this)
                .fileupload('option','done')
                .call(this,$.Event('done'),{ result: result });
        });
});

服务器端(控制器)

  [HttpPost]
        public async Task<JsonFiles> UploadFiles(IFormFile[] file)  //it contains one element. I want all elements in one go
        {
...
}

jQuery-File-Upload without file

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)