2

asp.net mvc3とknockout.jsを使用した複数ファイルのアップロードの包括的な例を探しています。私は周りを見回してきましたが、最初から最後まで解決策を示すものは何もありません! ノックアウトバインディングが必要なものを示す例がありますが、「コントローラー」でファイルを読み取る方法は示していません。目標は、ファイルをアップロードしてデータベースに保存することです。AWS S3 ストレージへの保存の例はプラスです。助けてください。

コバインディング：

<input type="file" data-bind="value: fileToUpload, fileUpload: fileToUpload, url : 'Client/Upload' " /> 

ko.bindingHandlers.fileUpload = {
     update: function (element, valueAccessor, allBindingsAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor())
            if (element.files.length && value) {
                var file = element.files[0];
                var url = allBindingsAccessor().url


xhr = new XMLHttpRequest();
            xhr.open("post", url, true);
            xhr.setRequestHeader("Content-Type", "image/jpeg");
            xhr.setRequestHeader("X-File-Name", file.name);
            xhr.setRequestHeader("X-File-Size", file.size);
            xhr.setRequestHeader("X-File-Type", file.type);
            console.log("sending")
            // Send the file (doh)
            xhr.send(file);
        }
    }
}



[HttpPost]
        public ActionResult Upload()
        {
           //Not sure what to do here.
        }

また、複数のファイルをアップロードする必要がありますか? ビューモデルの設定方法がわかりません。

4

1 に答える 1

2

JavaScript 側では、fineuploader http://fineuploader.com/を使用することをお勧めします。応答でビューモデルを更新するためのカスタム バインディングを作成できます。

<div data-bind="fileupload: viewModel.fileName"></div>

ko.bindingHandlers.fileUpload = {
 init: function (element, valueAccessor) {
       var $element = $(element);
       var fileNameVal = valueAccessor;
       var uploader = new qq.FineUploader({
          element: $element[0],
          request: {
            endpoint: 'server/your_upload_service'
          },
           multiple: true,
           validation: {
              allowedExtensions: ['jpeg', 'jpg', 'txt']
           },
          callbacks: {
             onComplete: function(id, fileName, responseJSON) {
                 if (responseJSON.success) {
                   // update your value
                   valueAccessor(fileName)
                   //may need to change this if you pass a reference back 
                   // in your responseJSON such as an s3 key
                }
             }
          }
       });
    }
};

サーバー側に関しては、私はASP.netに精通していませんが、エンドポイントでリクエストデータと対話し、画像データを含むマルチパートエンコードされたフォームパーツを抽出できるはずです.

これらの回答を見たいと思うかもしれません

MVC 3 ファイルのアップロードとモデル バインディング

ファイルのアップロード ASP.NET MVC 3.0

また、fineuploader はキー「qqfile」を使用してリクエストでファイルを送信することにも注意してください。

于 2013-03-05T05:11:00.517 に答える