引导文件的输入插件获取表单数据控制器 [英] Bootstrap File Input plugin getting the form data to the controller

问题描述

我使用的是引导文件的输入插件，我试图让图像到控制器，但我没有任何成功。有没有人在MVC实现这一点，可以给我一些指导？我成功地传递的ContactID在 uploadExtraData 属性。如果我评论说出来，并使用数据属性我收到了该方法的参数的构造函数找不到的错误消息。这是有道理的，但我不知道如何通过输入阵列控制器。

查看code

 ＆LT; D​​IV CLASS =COL-MD-12表格组＆GT;
    ＆LT; D​​IV CLASS =主编场＆GT;
        ＆LT;输入ID =输入702NAME =卡尔蒂克输入-702 []类型=文件多重=真正的类=文件加载＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
    $（文件）。就绪（函数（）{
        $（＃输入-702）。的FileInput（{
            输入：POST，
            缓存：假的，
            allowedFileExtensions：JPG，PNG，GIF]
            allowedFileTypes：['形象']，
            MAXFILESIZE：2000，
            的uploadURL：@ Url.Action（ImageUpload，联系方式），
            MAXFILECOUNT：2，
            ENCTYPE：'的multipart / form-data的'，
            overwriteInitial：真实，
            uploadExtraData：{请求：的document.getElementById（'输入-702）的价值，'的ContactID：的document.getElementById（'的ContactID'）值。}
            msgSizeTooLarge：文件{名}（{}大小KB）超过{} MAXSIZE KB请再试一次最大上传大小
            msgFilesTooMany：选择上传文件数（{N}）超出了{M-}允许的上限，
            msgInvalidFileType：无效的类型文件（名称）。只有{}类型文件的支持。，
            msgInvalidFileExtension：无效的扩展名文件（名称）。只有{}扩展文件的支持。，
        }）;
    }）;
＆LT; / SCRIPT＆GT;
 

控制器code

  [HttpPost]
公众的ActionResult ImageUpload（HTT prequest要求，INT的ContactID）
{
    INT的ContactID =（INT）的ContactID;
    返回null;
}
 




解决方案

解决：我发现了一个类似的插件，使用MVC实现。同样的构造工作了此控件。

 公众的ActionResult SaveUploadedFile（）
    {
        布尔isSavedSuccessfully = TRUE;
        字符串FNAME =;
                尝试{
        的foreach（在Request.Files字符串文件名）
        {
            HttpPostedFileBase文件= Request.Files [文件名]。
            //保存文件内容放在这里
            FNAME = file.FileName;
            如果（文件= NULL＆放大器;！＆安培; file.ContentLength大于0）
            {                VAR originalDirectory =新的DirectoryInfo（的String.Format（{0}图片\\\\ WallImages，使用Server.Mappath（@\\）））;                串pathString = System.IO.Path.Combine（originalDirectory.ToString（），的ImagePath）;                VAR FILENAME1 = Path.GetFileName（file.FileName）;                布尔isExists = System.IO.Directory.Exists（pathString）;                如果（！isExists）
                    System.IO.Directory.CreateDirectory（pathString）;                VAR路径=的String.Format（{0} \\\\ {1}，pathString，file.FileName）;
                file.SaveAs（路径）;            }        }       }
       赶上（异常前）
        {
            isSavedSuccessfully = FALSE;
        }
        如果（isSavedSuccessfully）
        {
            返回JSON（新{消息= FNAME}）;
        }
        其他
        {
            返回JSON（新{消息=错误的文件保存}）;
        }
    }
 

I'm using the Bootstrap File Input plugin and I'm trying to get the images to the Controller but I'm not having any success. Has anyone implemented this in MVC that could give me some direction? I was successful in passing the contactId in the uploadExtraData property. If I comment that out and use the data property I receive an error message that a parameterless constructor for the method could not be found. That makes sense but I'm not sure how to pass the input array to the controller.

View Code

<div class="col-md-12 form-group">
    <div class="editor-field">
        <input id="input-702" name="kartik-input-702[]" type="file" multiple="true" class="file-loading">
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#input-702").fileinput({
            type: 'POST',
            cache: false,
            allowedFileExtensions: ['jpg', 'png', 'gif'],
            allowedFileTypes: ['image'],
            maxFileSize: 2000,
            uploadUrl: '@Url.Action("ImageUpload", "Contact")',
            maxFileCount: 2,
            enctype: 'multipart/form-data',
            overwriteInitial: true,
            uploadExtraData: { 'request': document.getElementById('input-702').value, 'contactId' : document.getElementById('ContactID').value },
            msgSizeTooLarge: "File {name} ({size} KB) exceeds maximum upload size of {maxSize} KB. Please Try again",
            msgFilesTooMany: "Number of Files selected for upload ({n}) exceeds maximum allowed limit of {m}",
            msgInvalidFileType: 'Invalid type for file "{name}". Only {types} files are supported.',
            msgInvalidFileExtension: 'Invalid extension for file {name}. Only "{extensions} files are supported.',
        });
    });
</script>

Controller Code

[HttpPost]
public ActionResult ImageUpload(HttpRequest request, int contactId)
{
    int contactID = (int)contactId;
    return null;
}

解决方案

Solved: I found a similar plugin that was using MVC implementation. The same constructs worked for this control.

public ActionResult SaveUploadedFile()
    {
        bool isSavedSuccessfully = true;
        string fName = "";
                try{
        foreach (string fileName in Request.Files)
        {
            HttpPostedFileBase file = Request.Files[fileName];
            //Save file content goes here
            fName = file.FileName;
            if (file != null && file.ContentLength > 0)
            {

                var originalDirectory = new DirectoryInfo(string.Format("{0}Images\\WallImages", Server.MapPath(@"\")));

                string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "imagepath");

                var fileName1 = Path.GetFileName(file.FileName);

                bool isExists = System.IO.Directory.Exists(pathString);

                if (!isExists)
                    System.IO.Directory.CreateDirectory(pathString);

                var path = string.Format("{0}\\{1}", pathString, file.FileName);
                file.SaveAs(path);

            }

        } 

       }
       catch(Exception ex)
        {
            isSavedSuccessfully = false;
        }


        if (isSavedSuccessfully)
        {
            return Json(new { Message = fName });
        }
        else
        {
            return Json(new { Message = "Error in saving file" });
        }
    }

这篇关于引导文件的输入插件获取表单数据控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！