1

ダイアログに表示するフォームがあり、クリックするとjQueryを使用してAJAXを使用してサーバーにフォームを送信する「送信」ボタンがあります。これはMVCアクションメソッドに対するものです。アップロードされたファイルは常にnullでした。Googleを使用していると、ある種のプラグインを使用しない限り、通常はAJAXを使用してファイルを投稿できないことを読みました。

プラグインを使用したくなかったのですが、これはHTML5ファイルAPIをサポートするブラウザーで実行できると読んだので、これで動作させたいと思います。

現時点では、ドラッグアンドドロップなどは気にしません。jQueryを使用して、フォームの残りの部分と一緒にファイルを投稿したいだけです。

これまでのところ：

これは、フォームの部分的なビューです。

@model ImageReceiptLineModel

@using (Html.BeginForm(MVC.EditImageReceiptLine(), FormMethod.Post, new { enctype = "multipart/form-data" }))
{
  @Html.HiddenFor(model => model.ReceiptLineSetID)
  @Html.HiddenFor(model => model.LineNumber)
  <input id="uploadFile" name="uploadFile" type="file" value="Choose New Image" />
  @Html.LabelFor(model => model.ImageDescription)
  @Html.TextBoxFor(model => model.ImageDescription)
}

これは、フォームを送信するためのjQueryです。

if ($Form.valid()) {
        // get the url and the form data to send the request
        var Url = $Form.attr('action');
        var FormData = $Form.serialize();

        // now do the ajax call
        $.ajax({
            url: Url,
            data: FormData,
            type: 'POST',
            cache: 'false',
            success: function (data, textStatus, jqXHR) {
                // do something here
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // do something here
            }
        });
    }

MVCアクションメソッドは次のとおりです。

/// <summary>
/// Edit receipt line action
/// </summary>
/// <returns>Action result</returns>
[HttpPost]
public virtual ActionResult EditImageReceiptLine(HttpPostedFileBase uploadFile, ImageReceiptLineModel model)
{

}

ファイルをフォームに追加するには、これに何を追加する必要がありますか？「FormData」は、サーバーに投稿するシリアル化されたフォームデータです。

4

1 に答える 1

2

guideこれは、ファイルのアップロードに使用できるFileAPIについてです。ただし、これはIE9では機能しないことを忘れないでください。このようなブラウザをサポートする必要がある場合は、非表示のiframeを使用して、AJAXでファイルのアップロードをシミュレートできます。そのため、 jquery.formなどのプラグインが存在します。ブラウザのサポートなどについて心配する必要がないように、1行のコードにするために：

if ($Form.valid()) {
    // get the url and the form data to send the request
    $Form.ajaxSubmit({
        success: function (data, textStatus, jqXHR) {
            // do something here
        },
        error: function (jqXHR, textStatus, errorThrown) {
            // do something here
        }
    });
}

アップデート：

コメントセクションで要求されたように、FileAPIを使用する方法は次のとおりです。

次のフォームがあるとします。

@using (Html.BeginForm(MVC.EditImageReceiptLine(), null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.HiddenFor(model => model.ReceiptLineSetID)
    @Html.HiddenFor(model => model.LineNumber)
    <input id="uploadFile" name="uploadFile" type="file" value="Choose New Image" />
    @Html.LabelFor(model => model.ImageDescription)
    @Html.TextBoxFor(model => model.ImageDescription)    
}

フォームの送信をトリガーするリンク：

<a href="#" id="upload">Upload the file using HTML5 File API</a>

これで、jsファイルに次のように含めることができます。

$('#upload').click(function () {
    if (!window.FileReader) {
        // the browser doesn't support the File API - there's no need
        // to continue;
        alert('To use this functionality please use a modern browser');
        return;
    }

    var $form = $('form');
    var uri = $form.action;
    var xhr = new XMLHttpRequest();
    var fd = new FormData();

    $form.find(':input').each(function () {
        if ($(this).is('input[type="file"]')) {
            var files = $(this)[0].files;
            if (files.length > 0) {
                fd.append(this.name, files[0]);
            }
        } else {
            fd.append(this.name, $(this).val());
        }
    });

    xhr.open('POST', uri, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // handle response.
            alert(xhr.responseText); 
        }
    };

    xhr.send(fd);
});
于 2012-09-21T10:01:06.633 に答える