ノックアウトJS：ファイルアップロードイベント

Question

私はファイル

をアップロードするために、このノックアウトjsのスクリプトを持っているユーザーがアップロードコントロールにファイルを選択したときにこのコードは、アップロードのイベントをトリガ

Upload.html

$(function() { 
     var viewModel = { 
      filename: ko.observable(""), 
     }; 

     ko.applyBindings(viewModel); 
    }); 

<form> 
<input id="upload" name="upload" 
    data-bind="fileUpload: { property: 'filename', url: 'http://localhost/api/upload/PostFormData' }" 
    type="file" /> 

<button id="submitUpload">Upload</button> 
</form> 

FileUpload.js

ko.bindingHandlers.fileUpload = { 
init: function (element, valueAccessor) { 
    $(element).after('<div class="progress"><div class="bar"></div><div class="percent">0%</div></div><div class="progressError"></div>'); 
}, 
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 


    var options = ko.utils.unwrapObservable(valueAccessor()), 
     property = ko.utils.unwrapObservable(options.property), 
     url = ko.utils.unwrapObservable(options.url); 



    if (property && url) { 

     $(element).change(function() { 
      if (element.files.length) { 
       var $this = $(this), 
        fileName = $this.val(); 

       // this uses jquery.form.js plugin 
       $(element.form).ajaxSubmit({ 
        url: url, 
        type: "POST", 
        dataType: "text", 
        headers: { "Content-Disposition": "attachment; filename=" + fileName }, 
        beforeSubmit: function() { 
         $(".progress").show(); 
         $(".progressError").hide(); 
         $(".bar").width("0%") 
         $(".percent").html("0%"); 

        }, 
        uploadProgress: function(event, position, total, percentComplete) { 
         var percentVal = percentComplete + "%"; 
         $(".bar").width(percentVal) 
         $(".percent").html(percentVal); 

        }, 
        success: function(data) { 
         //$(".progress").hide(); 
         //$(".progressError").hide(); 
         // set viewModel property to filename 
         $("label[for='upload']").text(data); 

         bindingContext.$data[property](data); 
        }, 
        error: function(jqXHR, errorThrown) { 
         $(".progress").hide(); 
         $("div.progressError").html(jqXHR.responseText); 
        } 
       }); 
      } 
     }); 
    } 
} 

}

は今、私はどのようにこれを行うには、送信ボタン

<button id="submitUpload">Upload</button> 

にアップロードイベントのトリガに移動したいですか？今はこれが私がいる場所です。ボタンのクリックイベント内でアップロードイベントを移動するだけです。しかし、それは動作していない、それはAPIにajax要求を呼び出すことはありません。

$('#submitUpload').click(function() { 

      if (element.files.length) { 

       var $this = $(element), 
        fileName = $this.val(); 
       //alert(element.form); 

       // this uses jquery.form.js plugin 
       $(element.form).ajaxSubmit({ 
        url: url, 
        type: "POST", 
        dataType: "text", 
        headers: { "Content-Disposition": "attachment; filename=" + fileName }, 
        beforeSubmit: function() { 
         $(".progress").show(); 
         $(".progressError").hide(); 
         $(".bar").width("0%") 
         $(".percent").html("0%"); 

        }, 
        uploadProgress: function(event, position, total, percentComplete) { 
         var percentVal = percentComplete + "%"; 
         $(".bar").width(percentVal) 
         $(".percent").html(percentVal); 

        }, 
        success: function(data) { 
         //$(".progress").hide(); 
         //$(".progressError").hide(); 
         // set viewModel property to filename 
         $("label[for='upload']").text(data); 

         bindingContext.$data[property](data); 
        }, 
        error: function(jqXHR, errorThrown) { 
         $(".progress").hide(); 
         $("div.progressError").html(jqXHR.responseText); 
        } 
       }); 
      } 
     }); 

Answer 1

要素は、クリックの瞬間には不明です。あなたはフォーム上でそれを見つける必要があります。

element = $('#upload').get(0); 

であなたのクリック機能の最初の行を開始し、ボタンのタグが自動的にフォームを送信するため、次の

<input type="button" id="submitUpload" value="Upload"></input> 

を使用して、ボタンのタグを置き換える 。

Answer 2

名前のみを渡す代わりに、バインディングハンドラのURLがViewModelオブジェクトの3番目のパラメータ（fileBinaryData）を渡し、KO BindingHandlerのUpdateメソッドのコンテンツを読み込み、updateメソッドの3番目のobservable（fileBinaryData）を更新します。

次に、ファイルの内容を持っていますボタンのバインドクリックイベントとアクセスfileBinaryData、観察のためにそう

をViewModelにあなたにこのfilebinaryデータを使用することができます。

BindingHandler：

ko.bindingHandlers.FileUpload = { 
    init: function (element, valueAccessor) { 
     $(element).change(function() { 
      var file = this.files[0]; 
      if (ko.isObservable(valueAccessor())) { 
       valueAccessor()(file); 
      } 
     }); 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor) { 
     var file = ko.utils.unwrapObservable(valueAccessor()); 
     var bindings = allBindingsAccessor(); 

     if (bindings.fileBinaryData && ko.isObservable(bindings.fileBinaryData)) { 
      if (!file) { 

       bindings.fileBinaryData(null); 
      } else { 
       var reader = new window.FileReader(); 
       reader.onload = function (e) { 

        bindings.fileBinaryData(e.target.result); 
       }; 
       reader.readAsBinaryString(file); 
      } 
     } 
    } 
} 

HTML：

<input type="file" id="fileUpload" class="file_input_hidden" data-bind="FileUpload: spFile, fileObjectURL: spFileObjectURL, fileBinaryData: spFileBinary" /> 

のViewModel：

var viewModel = { 
     filename: ko.observable(""), 
     url: ko.observable(), 
     spFileBinary:ko.observable(), 
     //Write your CLICK EVENTS 
    }; 

ホープ、このことができます:)