0

我想使用 AJAX 将图像发送到 .Net MVC 服务器应用程序，我发现其中一种方法是使用jquery.form.js。但是我做不到，当我取消注释该部分时，它说请求无法序列化：

// the image I would like to pass
//thumb: $('#imagePath')[0],

CSHTML文件生成的HTML如下：

从 CreateItem.cshtml 生成的 HTML

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all" style="display: block;
z-index: 1002; outline: 0px none; height: auto; width: 557.6px; top: 62px; left: 280px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog-form">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <div id="dialog-form" class="ui-dialog-content ui-widget-content" shape-id="3" style="width: auto;
        min-height: 0px; height: 296px;" scrolltop="0" scrollleft="0">
        <form class="item-form" method="post" action="/OrchardLocal/Course/CreateCourse"
        shape-id="3">
        <fieldset shape-id="3">
            <ul class="image-preview-list" shape-id="3">
                <li shape-id="3">
                    <div style="border-color: Black; border-width: thick;" shape-id="3">
                        <img id="thumb" class="image-from-popup" alt="some image" src="/OrchardLocal/Media/Default/Images/abc/abc.jpg"
                            shape-id="3">
                    </div>
                </li>
                <li shape-id="3">
            </ul>
            <label for="description" shape-id="3">
                Description</label>
            <textarea id="description" class="description-text text ui-widget-content ui-corner-all description-class"
                rows="2" name="description" cols="20" shape-id="3"></textarea>
        </fieldset>
        <input type="hidden" value="FApn3HBCkLLIo59k6ZFvlT4/Ug+3ZDhILay4C+hbdG7lAQfeWyms5ulVZ2scLkHgmwkqhDk0121dT03116VIVrSmWr3Tp0njksqX/Gnr3BK1nI7GdO1Em6ugdAbBJcUSNP0snS1DOHffG7sbq8x/dyK/ALI1bY+HDdIkk2oW5oC63YkV7Fq5pc7MjkPjTEj9o8oCYSFBsm0OdCzsZlpWFw=="
            name="__RequestVerificationToken" shape-id="3">
        </form>
    </div>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
        <div class="ui-dialog-buttonset">
            <button type="button">
                Create</button>
        </div>
    </div>
</div>

我有一个 javaScript 文件：

$(document).ready(function () {
    // bind '.item-form' and provide a simple callback function 
    $('.item-form').ajaxForm(function () {

        alert("Thank you for your comment!");
    });
}); 

$(function () {


    var UNIQUE_TITLE = "You must specify an unique title";
    var TITLE_IS_REQUIRED = "You must specify a title";
    var DESCRIPTION_IS_REQUIRED = "You must specify a description";




    $('#dialog-form').dialog({
        autoOpen: false,
        height: 400.6,
        width: 557.6,
        modal: true,
        draggable: false,
        resizable: false,
        buttons: {
            "Create": function () {

                var newContactItem = {
                    title: $.trim($("#title").val()),
                    description: $.trim($(".description-class").val()),
                    imagePath: $.trim($("#imagePath").val()),


                    // the image I would like to pass
                    //thumb: $('#imagePath')[0], 


                    __RequestVerificationToken: antiForgeryToken                    }


                var form = $('.item-form');

                $.ajax({
                    type: "POST",
                    url: form.attr("action"), 
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify(newContactItem),
                    success: function (data) {
                        // There is no problem with the validation
                        if (data.valid) {
                            $('#eventos').html(html);
                        }

                      $.each(data.Errors, function (key, value) {
                            if (value != null) {
                                $("#Err_" + key).html(value[value.length - 1].ErrorMessage);
                            }
                        });

                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.responseText);
                        alert("Critical Error!. Failed to call the server.");
                    }
                });


            }
        }
    });
4

1 回答 1

1

您不能同时使用 ajaxForm 和 jQuery.post 来发送表单。我相信你需要重写，只使用 ajaxForm。

于 2012-06-30T20:14:26.857 回答