Question

我想将Krajee bootstrap-fileinput（http://plugins.krajee.com/file-input）与Mvc razor一起使用，请帮我解决将图像上传到服务器以及从actionResult上传json结果的过程。

我刚在视图页面中添加了一个必需的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: ""
});

此行正在格式化并显示拖放效果和选择文件按钮。文件选择和缩略图创建工作正常但在上传操作时，有（fileinput，js）函数“ajaxSubmit”用于发布内容到HomeController ActionResult“上传”。

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。如何检索formdata和进程。??

Answer 1

我试图找到上述问题的解决方案，最后找到了解决方案。因为我能够从控制器保存服务器位置的文件，但遗憾的是我无法将控制器的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数组对象并将其作为响应对象发送。???

Answer 2

我有类似的问题。得到它（使用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

我的场景是该用户：

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

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

Krajee bootstrap-fileinput with Mvc razor

2 个答案: