Blueimp jQuery-File-Upload 基本插件在 ASP.NET MVC 视图中显示不需要的提交按钮

Question

我有一项任务是编辑我们老公司的一个 asp.NET MVC 应用程序，我们使用 flash (uploadify) 上传文件到这个时候。但是现在，我们要使用 Blueimp jQuery-File-Upload basic plugin.

一切正常，但不需要的提交按钮有问题，这是（我相信）从插件脚本本身生成的。

你有什么想法，如何防止这个按钮的生成？

来自应用程序的屏幕截图：

蓝色区域 = span (class fileInputButton) 我用它作为打开文件浏览器的按钮 window

绿色区域 = 不需要的提交按钮，由 blueimp 脚本生成

当我在浏览器中搜索页面上的元素时，结果是绿色区域是#file-upload-button 按钮类型并且来自 partial cs[=67 中的 fileupload 输入=] 查看:

<div class="fileMenu">
        @*<div class="FileMenuItem">
            <input id="file_upload" name="file_upload" type="file" multiple="true">
        </div>*@
        <div class="FileMenuItem">
            <span class="FileInputButton">
                <span>PŘIDAT SOUBORY</span>
                <input id="fileupload" type="file" name="files" multiple>
            </span>
        </div>

        <div id="progress" style="position: relative; clear: both; padding-left: 19px; display: none">
            <img src="~/Images/ajax-loader.gif" />
        </div>

        @*Other non-important elements...*@

    </div>

我正在使用的CSS：

.FileInputButton {
    position: relative;
    background: url(../Images/add-file-16.png) 3px 5px no-repeat;
    color: red;
    font: 12px Arial, Helvetica, sans-serif;
    width: 100%;
    padding-left: 25px;
    cursor: pointer;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.fileMenu {
    display: block;
    float: left;
    margin-top: 30px;
}

    .fileMenu .FileMenuItem {
        color: #E20B08;
        display: block;
        float: left;
        padding-left: 10px;
        width: 137px;
        font-size: 13px;
    }

文件上传功能，我在主视图中有Index.cshtml:

            $('#fileupload').fileupload({
                    url: '@Url.Action("UploadFiles", "Case")',
                    dataType: 'json',
                    autoUpload: true,
                    multipart: true,
                    singleFileUploads: false
                }).on('fileuploaddone', function (e, data) {
                    var errorFiles = '';
                    $.each(data.files, function (index, file) {
                        var fileName = file.name;
                        if (file.error) {
                            errorFiles = errorFiles + '\n' + fileName + ', viz: ' + file.error;
                        } else {
                            //Some own non-important code...

                            try {
                                //Another non-important own code...
                            } catch (err) {
                                errorFiles = errorFiles + '\n' + fileName + ', viz: ' + err.message;
                            }
                        }
                    });

                    if (errorFiles !== '') {
                        alert('Error while uploading files:' + errorFiles);
                    }

                }).on('fileuploadadd', function (e, data) {
                    data.submit();

                }).on('fileuploadstop', function (e, data) {
                    $('#progress').hide();

                }).on('fileuploadstart', function (e, data) {
                    $('#progress').show();

                }).on('fileuploadfail', function (e, data) {
                    alert('File upload error');

                }).prop('disabled', !$.support.fileInput)
                .parent().addClass($.support.fileInput ? undefined : 'disabled');

我在共享 _Layout.csthml:

中为此视图加载的
脚本和 CSS
<link href="~/Content/jmenu.css" rel="stylesheet" /> <link href="~/Content/Site.css" rel="stylesheet" /> @*This one contains the .FileMenu, .FilemenuItem and .FileInputButton*@ <link href="~/Content/checkboxes.css" rel="stylesheet" /> <script src="@Url.Content("~/Scripts/json2.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery/jquery.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery/jquery-ui.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.ui.datepicker-cs.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/JQuery/jquery.ui.widget.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/JQuery/jquery.fileupload.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/JQuery/jquery.iframe-transport.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/JStorage/jstorage.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/PDFObject/pdfobject.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/Mask/jquery.mask.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/Validation/CustomFieldValidator.js")" type="text/javascript"></script>

我认为这并不重要，但为了完整起见，控制器上传方法

[AcceptVerbs(HttpVerbs.Post)] public JsonResult UploadFiles(List<HttpPostedFileBase> files) { List<string> fileNames = new List<string>(); try { //Non-important own code return Json( new { ProcessedFiles = fileNames }); } catch (Exception ex) { return Json( new { ProcessedFiles = fileNames, Exception = ex.Message }); } }

我尝试了很多东西，但老实说，我是 ASP.NET、jquery、html 等领域的新手。所以我认为这对于了解的人来说是平庸的这个区域。

Answer 1

感谢@Rory McCrossan 的评论，我找到了解决方案。我所要做的就是编辑我的 CSS 以隐藏原始文件输入并在部分 cshtml 中应用 CSS。

所以改变...

部分cshtml

<div class="fileMenu">
    @*<div class="FileMenuItem">
        <input id="file_upload" name="file_upload" type="file" multiple="true">
    </div>*@
    <div class="FileMenuItem">
        <span class="fileinput-button fileinput-overlap">
            <span>PŘIDAT SOUBORY</span>
            <input id="fileupload" type="file" name="files" multiple>
        </span>
    </div>

    <div id="progress" style="position: relative; clear: both; padding-left: 19px; display: none">
        <img src="~/Images/ajax-loader.gif" />
    </div>

    @*Other non-important elements...*@

</div>

和新的CSS

.fileinput-button {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.fileinput-button input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    font-size: 200px !important;
    direction: ltr;
    cursor: pointer;
}

.fileinput-overlap {
    background: url(../Images/add-file-16.png) 3px 5px no-repeat;
    background-position: left 0px top 6px;
    color: #E20B08;
    font: 12px Arial, Helvetica, sans-serif;
    width: 127px;
    padding-left: 20px;
    padding-top: 9px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Blueimp jQuery-File-Upload 基本插件在 ASP.NET MVC 视图中显示不需要的提交按钮

Blueimp jQuery-File-Upload basic plugin shows unwanted submit button in ASP.NET MVC view

c#

asp.net-mvc

jquery

submit-button

blueimp