Question

我在Asp.net MVC 4上开发了一个Web应用程序。我有一个文件上传功能与其他表单输入控件。我在使用Dropzone.js。我在表单中有多个控件超过40个。 Dropzone非常适合拖放和剪贴板粘贴，但是当有更多控件时，它会变得混乱，因为我们必须编写

formData.append("OfferType", $("#OfferType").val());

为每个控件将其与控制器操作绑定。我想要一个jquery文件上传控件，它不需要编写任何额外的代码，并且可以执行所有剪贴板粘贴，拖放以及Dropzone提供的所有功能。

所以我遇到了

jQuery.Filer

它提供了我想要的所有选项，但我遇到了.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;
                            }
                        }
                    }
                }
}
}

为什么jQuery.Filer在没有点击提交按钮的情况下发布图片？

0 个答案: