Amplifyjs 发布表单数据答案

【问题标题】：Amplifyjs posting formDataAmplifyjs 发布表单数据
【发布时间】：2014-04-25 22:01:21
【问题描述】：

我是 Web 开发的新手，在将文件保存到数据库时遇到问题。我正在使用 MVC 4、knockoutjs 2.3.0、jquery 2.03 和 amplifyjs 1.1.0。

这就是我想要的方式。

在我的上传页面中，我有一个表单：

<form id="uploadForm" name="uploadForm" action="~/Administration/UploadReports"       method="post" enctype="multipart/form-data">
    <input required type="file" name="fileToUpload" id="fileToUpload" accept="html, image/jpeg">
        <input type="submit" data-bind="click:submit" value="Ladda upp fil" />
        <input type="reset" value="Avbryt" />
    </form>

然后在我的 knockoutViewModel 中有以下代码：

 this.submit = function (model, element) {
                var test = $('#uploadForm')[0];
                var formData = new FormData(test);

                amplify.request({
                    resourceId: "uploadReport",
                    success: () => {
                        console.log("success");
                    },
                    error: () => {
                        console.log("error");
                    },
                    data: formData 
                });                   
            };

到目前为止，一切正常。当我按下表单中的按钮时，我就到了这里。但我认为 amplifyjs 正在用我的 dataForm 做一些事情...... Amplify.request 定义如下：

amplify.request.define('uploadReport', 'AJAX', {
    url: '/Administration/UploadReports',
    type: 'POST',
    contentType: false,
    processData: false,
    cache: false
});

在我的控制器中它看起来像这样：

    [HttpPost]
    public ActionResult UploadReports(HttpPostedFileBase fileToUpload)
    {

        //Update the list of files
        var model = new AdministrationViewModel();

        byte[] result;

        using (var streamReader = new MemoryStream())
        {
            fileToUpload.InputStream.CopyTo(streamReader);
            result = streamReader.ToArray();
        }

        model.BetFiles = FileInserter.InsertFile(fileToUpload.FileName, fileToUpload.ContentType, fileToUpload.ContentLength, result).Value;


        return View("Reports", model);
    }

谁能帮我看看是什么问题？

问候，大卫

这是我得到的：

这是我期望得到的：

【问题讨论】：

有什么问题？您是否在某处遇到错误？

标签： jquery html asp.net-mvc-4 knockout.js amplifyjs

【解决方案1】：

目前 amplify.js 在 1.1.2 版本中不支持 FormData。

检查这个问题 https://github.com/appendto/amplify/issues/107

可能的解决方案是修改此事件订阅中的库

amplify.subscribe( "request.ajax.preprocess", function(defnSettings, settings, ajaxSettings) {
        var mappedKeys = [],
            data = ajaxSettings.data;

        if (typeof data === "string" || Object.prototype.toString.call(data) === "[object FormData]") {
            return;
        }
......(omited)
)}

如果是本机 FormData 对象，则放大将忽略传递的对象。请求定义中的设置必须包括以避免 jQuery 再次与您的 FormData 对象混淆

contentType: false
cache: false
processData: false

【讨论】：

【解决方案2】：

如果我将淘汰视图模型中的 this.submit 函数更改为下面的代码，它应该可以正常工作，但我想使用 amplify 来获取它。

 this.submit = function (model, element) {
                var test = $('#uploadForm')[0];

                var formURL = formObj.attr("action");
                var formData = new FormData(test);

                $.ajax({
                    url: formURL,
                    type: 'POST',
                    data: formData,
                    mimeType: "multipart/form-data",
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function (data, textStatus, jqXHR) {

                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                    }
                });

            };

当然在我的控制器方法中我应该返回：

return Json(model.BetFiles);

而不是视图。

【讨论】：