7

私は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）私のテクニックは完全にオフですか？これを行うためのより良い方法はありますか？私の目標は、アップロードされる画像の「​​スロット」の動的なリストを作成することです。

前もって感謝します！

4

2 に答える 2

8

ローカルファイルの内容にアクセスできないことは、JavaScriptセキュリティサンドボックスの基本的な制限でした。HTML5ファイルAPIの導入により解除されましたが、残念ながら、サポートは普遍的ではありません。コードが非準拠のブラウザーで機能する必要がある場合、唯一のオプションは、ブラウザーに従来のmultipart/form-dataアップロードを処理させることです。一方、IE <10をサポートしていなくても問題がない場合は、カスタムバインディングでFileAPIの「ノックアウト方法」を使用できます。この例を見てください：http：//khayrov.github.com/jsfiddle/knockout-fileapi（何らかの理由で、このコードを実行しようとすると、jsFiddleがひどく壊れます）。Githubのソースコード。

于 2012-08-19T09:16:02.740 に答える
6

ファイルのアップロードは、特別な方法で処理する必要があります。これらは通常、モデルの一部ではありません。次の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、ApiControllerのパラメーターとして使用することです。HttpPostedFileBase基本的に、フォームを介してアップロードされたファイルのラッパーです。後者はASP.NETMVCフレームワークの一部であるため、使用MultipartFormDataStreamProviderが優先されることを追加する必要 があります。HttpPostedFileBaseWebAPIテクノロジはASP.NETMVCの外部で使用できることを忘れないでください。

詳細：http：//blogs.msdn.com/b/henrikn/archive/2012/03/01/file-upload-and-asp-net-web-api.aspxおよびASP.NETWebAPIファイルは「 BodyPart_3ded2bfb-40be-4183-b789-9301f93e90af "

于 2012-08-19T06:28:20.540 に答える