JQuery Filer 在提交时发布文件

Posted 2023-05-07

【中文标题】JQuery Filer 在提交时发布文件

【英文标题】：JQuery Filer post files on submit

【发布时间】：2016-12-26 04:42:38

【问题描述】：

尝试使用 jquery.filer 将图像上传到我在 asp.net mvc 中的控制器。如果我只是使用 html 文件输入类型，一切都会按预期工作，但是一旦启用插件，它就会停止填充 HttpPostedFileBase 属性。

阅读文档后，我无论如何都找不到简单地将文件附加到输入并在提交时上传它们。

控制器

[HttpPost]
    public ActionResult Create(IEnumerable<HttpPostedFileBase> files, ListingModel model)
    
        return View(model);
    

JS

    $("#filer_input").filer(
    limit: 6,
    maxSize: 5,
    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,
    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>\
                                    <span class="jFiler-item-others">fi-size2</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>\
                                        <span class="jFiler-item-others">fi-size2</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</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: true,
        removeConfirmation: true,
        _selectors: 
            list: '.jFiler-items-list',
            item: '.jFiler-item',
            progressBar: '.bar',
            remove: '.jFiler-item-trash-action'
        
    ,
    dragDrop: 
        dragEnter: null,
        dragLeave: null,
        drop: null
    ,
    //uploadFile: 
    //    url: "./php/upload.php",
    //    data: null,
    //    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: null,
    //    onProgress: null,
    //    onComplete: null
    //,
    addMore: false,
    clipBoardPaste: true,
    excludeName: null,
    beforeRender: null,
    afterRender: null,
    beforeShow: null,
    beforeSelect: null,
    onSelect: null,
    afterShow: null,
    //onRemove: function(itemEl, file, id, listEl, boxEl, newInputEl, inputEl)
    //    var file = file.name;
    //    $.post('./php/remove_file.php', file: file);
    //,
    onEmpty: null,
    options: null,
    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."
        
    
);

HTML

                        <div class="form-group clearfix">
                        <div class="col-sm-12 padding-left-0 padding-right-0">
                            <input type="file" name="files" id="filer_input2" multiple="multiple">
                        </div>
                    </div>

【参考方案1】：

如果您使用drag&drop 和uploadFile 功能，它将不起作用。如果你想从<input type="file"> 获取文件，你需要在你的 jQuery.filer 中禁用这两个选项