带Mvc剃须刀的Krajee bootstrap-fileinput [英] Krajee bootstrap-fileinput with Mvc razor

问题描述

我想使用Krajee引导文件输入( http://plugins.krajee.com/file-input )和Mvc剃刀，请帮助我完成将图片从actionResult上传到服务器和json结果的过程.

I want to use Krajee bootstrap-fileinput (http://plugins.krajee.com/file-input) with Mvc razor, Please help me out with the process to to upload images to server and json result from actionResult.

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

I have just included a required js and css files in my view page and added a line

<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上传".

This line is getting formatted and showing a drag and drop effect and select file button.The file selection and Thumbnail creation is working properly but on upload action there is the (fileinput,js) function "ajaxSubmit" which use to post the content to 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.如何检索表单数据和过程.

---

Now i want to save all the files to server which are not uploaded using ActionResult and pass a value back to js. how to retrieve formdata and process.??

推荐答案

我试图找到上述问题的解决方案，最后找到了解决方案.因为我能够从控制器将文件保存在服务器位置，但是很遗憾，我无法将JSON响应从控制器发送到javascript.

I was trying to find the solution to above problem and finally found the one. As I am able to save the file at server location from the controller but unfortunately I could not send the json response from controller to javascript.

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

Saving image using controller action :

[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数组对象)从服务器发送数据.

To implement the delete button we have to Send Data from server in Asynchronous mode as a json array object eg.

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数组对象并将其作为响应对象发送吗??

Can anybody help me out to create json array object in controller and send it as a response object.???

这篇关于带Mvc剃须刀的Krajee bootstrap-fileinput的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！