Bootstrap 文件输入插件获取表单数据到控制器

Question

我正在使用 Bootstrap File Input plugin 并尝试将图像发送到控制器，但没有成功。有没有人在 MVC 中实现了这个可以给我一些指导？我在uploadExtraData属性中成功传递了contactId。如果我将其注释掉并使用 data 属性，我会收到一条错误消息，指出找不到该方法的无参数构造函数。这是有道理的，但我不确定如何将输入数组传递给控制器。

查看代码

<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>

控制器代码

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

Answer 1

已解决：我发现了一个使用 MVC 实现的类似 plugin。相同的结构适用于此控件。

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" });
        }
    }

Bootstrap 文件输入插件获取表单数据到控制器

Bootstrap File Input plugin getting the form data to the controller

asp.net-mvc

jquery

c#-4.0