淘汰賽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對象傳遞第三個參數（fileBinaryData）然後讀取文件內容在KO BindingHandler的更新方法，然後更新update方法中的第三個observable（fileBinaryData）。

然後在你的ViewModel

所以對於按鈕綁定click事件和訪問fileBinaryData觀察到，這將有文件內容，您可以使用此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" /> 

視圖模型：

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

希望這有助於:)