我在 Asp.net MVC 4 上开发了一个 Web 应用程序。我有一个使用其他表单输入控件上传文件的功能。我正在使用 Dropzone.js。我在一个表单中有多个控件超过 40 个。Dropzone 非常适合拖放和剪贴板粘贴，但是当有更多控件时，它会变得混乱，因为我们必须编写
formData.append("OfferType", $("#OfferType").val());
让每个控件将其与控制器动作绑定。我想要一个 jquery 文件上传控件，它不必编写任何额外的代码，并且可以完成所有剪贴板粘贴、拖放和 Dropzone 提供的所有功能。
所以我遇到了
它提供了我想要的所有选项，但我面临 .net MVC 的问题。
- 它无需单击提交按钮即可发布文件，因此当我在填写所有必需的输入值后单击提交按钮时。
- 我错过了任何代码吗？因为他们给出的例子是 php，所以不了解 .net。
- 有没有更好的带有 jquery 和 mvc 的上传器，它提供所有拖放、剪贴板粘贴等功能？
请在下面找到代码
html
<div style="background: #f7f8fa;padding: 10px;">
<input type="file" name="attachments" id="filer_input" multiple="multiple" >
</div>
jQuery
$('#filer_input').filer({
limit:null,
maxSize:null,
extensions:null,
changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Drag&Drop files here</h3> <span style="display:inline-block; margin: 15px 0">or</span></div><a class="jFiler-input-choose-btn blue">Browse Files</a></div></div>',
showThumbs: true,
appendTo: null,
theme: "dragdropbox",
templates: {
box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>',
item: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li>{{fi-progressBar}}</li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppend: '<li class="jFiler-item">\
<div class = "jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li><span class="jFiler-item-others">{{fi-icon}} {{fi-size2}}</span></li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
progressBar: '<div class="bar"></div>',
itemAppendToEnd: false,
removeConfirmation: true,
_selectors: {
list: '.jFiler-items-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action'
}
},
uploadFile: {
data: {},
type: 'POST',
enctype: 'multipart/form-data',
beforeSend: function () { },
success: function (data, el) {
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function () {
$("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");
});
},
error: function (el) {
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function () {
$("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");
});
},
statusCode: {},
onProgress: function () { },
onComplete: function () { }
},
dragDrop: {
dragEnter: null,
dragLeave: null,
drop: null,
},
addMore: true,
clipboardPaste: true,
excludeName: null,
beforeShow: function () { return true },
onSelect: function () { },
afterShow: function () { },
onRemove: function () { },
onEmpty: function () { },
captions: {
button: "Choose Files",
feedback: "Choose files To Upload",
feedback2: "files were chosen",
drop: "Drop file here to Upload",
removeConfirmation: "Are you sure you want to remove this file?",
errors: {
filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.",
filesType: "Only Images are allowed to be uploaded.",
filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.",
filesSizeAll: "Files you've choosed are too large!Please upload files up to {{fi-maxSize}} MB."
}
}
});
});
控制器
[HttpPost]
[ValidateInput(false)]
public ActionResult CreateOffer(Models.CreateOfferModel offerToCreate, int[] InterestList)
{
if (ModelState.IsValid)
{
if (Request.Files.Count > 0)
{
HttpPostedFileBase file = Request.Files["attachments"];
if (file != null)
{
if (file.ContentLength > 0)
{
if (file.ContentType.ToLower().Contains("image"))
{
String filepath = UrCompedDAL.DataAccessor.Instance.AmazonAccessor.UploadImageToLocation(file.InputStream, "Offer", WebSecurity.CurrentUserId.ToString(), Guid.NewGuid() + "Offer.jpg");
offerToCreate.OfferImageURL = filepath;
}
}
}
}
}
}