Krajee bootstrap-带 Mvc 剃须刀的文件输入

Question

我想将 Krajee bootstrap-fileinput (http://plugins.krajee.com/file-input) 与 Mvc razor 一起使用，请帮助我完成将图像上传到服务器和 json actionResult 结果的过程.

我刚刚在我的视图页面中包含了一个必需的 js 和 css 文件，并添加了一行

<input id="input-702" name="kartik-input-702[]" type="file" multiple="true" class="file-loading">

和一个脚本

$("#input-702").fileinput({
    uploadUrl:"@Url.Action("upload","Home")",
    uploadAsync: true,
    minFileCount: 1,
    maxFileCount: 5,
    overwriteInitial: false,
    initialPreview: "",
    initialPreviewConfig:"",
    uploadExtraData: ""
});

此行正在格式化并显示拖放效果和 select 文件 button.The 文件 selection 和缩略图创建工作正常但在上传操作时有 ( fileinput,js) 函数 "ajaxSubmit" 用于 post HomeController ActionResult "Upload" 的内容。

ajaxSubmit: function (fnBefore, fnSuccess, fnComplete, fnError) {
        var self = this, settings;
        self.uploadExtra();
        settings = $.extend({
            xhr: function () {
                var xhrobj = $.ajaxSettings.xhr();
                return self.initXhr(xhrobj, 98);
            },
            url: self.uploadUrl,
            type: 'POST',
            dataType: 'json',
            data: self.formdata,
            cache: false,
            processData: false,
            contentType: false,
            beforeSend: fnBefore,
            success: fnSuccess,
            complete: fnComplete,
            error: fnError
        }, self.ajaxSettings);
        self.ajaxRequests.push($.ajax(settings));
    },

现在我想将所有未使用ActionResult上传的文件保存到服务器并将值传回给js。如何检索表单数据和处理。??

Answer 1

我也有类似的问题。让它工作（通过 ajax 调用）但总是在请求中得到一个文件（而我需要得到多个但应该为你工作！）

我的代码如下： HTML:

<input id="input-id" type="file" data-preview-file-type="text" name="fileUpload[]" multiple class="file-loading" />

JS:

  $("#input-id").fileinput(
            {
                uploadUrl: "/Galleries/Upload",
                uploadAsync: true,
                maxFileCount: 5

            });

我希望能正常工作的 MVC 控制器 - 但我没有：

[HttpPost]
public JsonResult Upload(IEnumerable<HttpPostedFileBase> fileUpload)
{
  //somde logic
}

然而，当在方法旁边时，我将调用：

Request.Files

我的场景是那个用户：

点击 'browse'
选择图片并能在预览中看到它
再次点击 'browse'
选择图片并将图片附加到当前预览列表
点击上传，我得到了控制器中的所有文件

我认为它是如何工作的唯一方法是插件上的 ajax 调用开关，它允许附加预览列表。不幸的是，那时我无法将所有图片提交给控制器。

Answer 2

我一直在寻找解决上述问题的办法，终于找到了。因为我能够从控制器将文件保存在服务器位置，但不幸的是我无法将控制器的 json 响应发送到 javascript。

使用控制器操作保存图像：

[HttpPost]
    public ActionResult upload()
    {           
        foreach (string item in Request.Files)
        {
            HttpPostedFileBase file = Request.Files[item] as HttpPostedFileBase;
            string fileName = file.FileName;
            string UploadPath = "~/Images/";

            if (file.ContentLength == 0)
                continue;
            if (file.ContentLength > 0)
            {
                string path = Path.Combine(HttpContext.Request.MapPath(UploadPath), fileName);
                string extension = Path.GetExtension(file.FileName);

                file.SaveAs(path);
            }
        }

        return Json("");
}

要实现删除按钮，我们必须以异步模式从服务器发送数据作为 json 数组对象，例如

initialPreview: [
    '<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>',
],


initialPreviewConfig: [
    {
        caption: 'desert.jpg', 
        width: '120px', 
        url: '/localhost/avatar/delete', 
        key: 100, 
        extra: {id: 100}
    }
]

有人可以帮我在控制器中创建 json 数组对象并将其作为响应对象发送吗？？？

Krajee bootstrap-带 Mvc 剃须刀的文件输入

Krajee bootstrap-fileinput with Mvc razor

model-view-controller

razor