ByteArrayをKnockout.jsからWebサービスへポストする [javascript]


Answers

ファイルのアップロードは特別な方法で処理する必要があります。 彼らは一般的にあなたのモデルの一部ではありません。 以下のApiControllerを見てください。 MultipartFormDataStreamProviderなどの特殊クラスは、コントローラに送信されたバイナリデータにアクセスするために使用されます。

public class FileUploadController : ApiController
{
    [HttpPost]
    public List<FileResult> UploadFile()
    {
        // Verify that this is an HTML Form file upload request
        if (!Request.Content.IsMimeMultipartContent("form-data"))
        {
            throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
        }

        // Create a stream provider for setting up output streams
        MultipartFormDataStreamProvider streamProvider = new MultipartFormDataStreamProvider();

        // Read the MIME multipart content using the stream provider we just created.
        IEnumerable<HttpContent> bodyparts = Request.Content.ReadAsMultipartAsync(streamProvider).Result;

        // The submitter field is the entity with a Content-Disposition header field with a "name" parameter with value "submitter"
        string submitter;
        if (!bodyparts.TryGetFormFieldValue("submitter", out submitter))
        {
            submitter = "unknown";
        }

        // Get a dictionary of local file names from stream provider.
        // The filename parameters provided in Content-Disposition header fields are the keys.
        // The local file names where the files are stored are the values.
        IDictionary<string, string> bodyPartFileNames = streamProvider.BodyPartFileNames;

        // Create response containing information about the stored files.
        return bodyPartFileNames.Select(kv =>
        {
            FileInfo fileinfo = new FileInfo(kv.Value);
            return new FileResult
            {
                FileName = kv.Key,
                LocalPath = fileinfo.FullName,
                LastModifiedTime = fileinfo.LastWriteTimeUtc,
                Length = fileinfo.Length,
                Submitter = submitter
            };
        }).ToList();
    }

    private static bool TryGetFormFieldValue(IEnumerable<HttpContent> contents, string dispositionName, out string formFieldValue)
    {
        HttpContent content = contents.FirstDispositionNameOrDefault(dispositionName);
        if (content != null)
        {
            formFieldValue = content.ReadAsStringAsync().Result;
            return true;
        }

        formFieldValue = null;
        return false;
    }
}

もう少しHttpPostedFileBaseれているのは、HttpPostedFileBaseをApiControllerのパラメータとして使用することです。 HttpPostedFileBaseは基本的にはフォームを通じてアップロードされたファイルのラッパーです。 後者はASP.NET MVCフレームワークの一部であるため、 MultipartFormDataStreamProviderを使用する方がHttpPostedFileBaseより優先されることを追加する必要があります。 WebAPIテクノロジはASP.NET MVCの外部で使用できます。

詳細情報: http : //blogs.msdn.com/b/henrikn/archive/2012/03/01/file-upload-and-asp-net-web-api.aspxASP.NET Web APIファイルは、 BodyPart_3ded2bfb-40be-4183-b789-9301f93e90af "

Question

私はKnockoutJSにはとても新しいので、これまでのところ掘り下げていますが、どこにでもこの情報を見つけることができないかもしれませんが、コミュニティが助けてくれることを願っています! 私のビューでは、ファイル入力に以下のデータバインディングがあります。

 <input type="file" data-bind="value: ImageToUpload"/>
 <button data-bind="click: $root.saveImage">Upload</button>

これは "foreach" div内のリストの一部なので、変数 "ImageToUpload"はそのリストのオブジェクトのプロパティに対応します。

私のViewModelでは、アップロードボタンがsaveImage()を呼び出し、Webサービスを呼び出し、フォームデータを.aspxページに渡します。

self.saveImage = function (MyObject, event) {

    $.post("Service.aspx", MyObject,  function (returnedData) {

    });
}

オブジェクトは私のサービスにうまく行き渡り、 "ImageToUpload"変数を含むすべてのフォームデータにアクセスできますが、ここで私は固執しています:

1) "ImageToUpload"は、アップロードしたファイルの名前を表す文字列であり、ByteArrayではありません。 名前だけでなく、イメージファイルにはどうすればアクセスできますか?

2)ByteArrayをストリームやその他の形式でレスポンスヘッダに渡す方が良いでしょうか?

3)私のテクニックは完全にオフですか? これを行うより良い方法はありますか? 私の目標は、画像「スロット」の動的リストをアップロードすることです。

前もって感謝します!