Knockout JS: FileUpload kiện

Question

Tôi có js knock-out này kịch bản để tải lên tập tin

Mã này gây nên sự kiện tải lên khi người sử dụng chọn một tập tin trong kiểm soát tải lên

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); 
        } 
       }); 
      } 
     }); 
    } 
} 

}

Bây giờ, tôi muốn di chuyển gây ra các sự kiện tải lên nút gửi

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

Làm thế nào để làm điều này? Ngay bây giờ đây là nơi tôi đang ở, tôi chỉ di chuyển sự kiện tải lên bên trong sự kiện nhấp chuột của nút. Nhưng nó không hoạt động, và nó không gọi yêu cầu ajax đến API.

$('#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

phần tử không xác định tại thời điểm nhấp chuột. bạn cần tìm nó trên biểu mẫu. Bắt đầu dòng đầu tiên của chức năng nhấp chuột của bạn với

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

và thay thế thẻ nút của bạn với những điều sau

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

vì thẻ nút tự động gửi biểu mẫu.

Answer 2

Thay vì chỉ chuyển tên, URL tới tham số thứ ba của thẻ bắt buộc (fileBinaryData) từ đối tượng ViewModel của bạn, sau đó đọc nội dung tệp trong phương thức cập nhật của KO BindingHandler rồi cập nhật phương thức cập nhật thứ ba (fileBinaryData).

Sau đó, bạn có thể sử dụng dữ liệu filebinary này trong bạn ViewModel

như vậy cho sự kiện nhấn nút bind và fileBinaryData truy cập quan sát mà sẽ có các nội dung tập tin.

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 
    }; 

Hope this helps :)