如何解决Blueimp jQuery-File-Upload 基本插件在 ASP.NET MVC 视图中显示不需要的提交按钮
我有一项任务来编辑我们的一个较旧的公司 asp.NET MVC 应用程序，我们使用 flash (uploadify) 上传文件到这个时间。但是现在，我们想使用 Blueimp jQuery-File-Upload basic plugin。
一切正常，但是不需要的提交按钮有问题，这是（我相信）从插件脚本本身生成的。
你有什么想法，如何防止这个按钮的生成？
应用截图：
蓝色区域 = span（class fileInputButton），我将其用作打开文件浏览器窗口的按钮
绿色区域 = 不需要的提交按钮，由 blueimp 脚本生成
当我在浏览器中搜索页面上的元素时，结果是绿色区域是#file-upload-button 按钮类型，来自部分 cshtml 视图中的文件上传输入：
<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;
}
$('#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',data) {
data.submit();
}).on('fileuploadstop',data) {
$('#progress').hide();
}).on('fileuploadstart',data) {
$('#progress').show();
}).on('fileuploadfail',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 等方面的新手。所以我相信这对于了解这个领域的人来说是很平常的事情。
解决方法
感谢@Rory McCrossan 的评论，我有一个解决方案。我所要做的就是编辑我的 CSS 以隐藏原始文件输入并将该 CSS 应用到部分 cshtml 中。
所以改变...
部分 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;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。