拖放文件上傳（挖空+ webapi + asp.net）

我正在尋找拖放文件上傳組件，使用Knockout + .NET WebApi技術。拖放文件上傳（挖空+ webapi + asp.net）

我發現File Api項目，它不支持舊瀏覽器，但我可以忍受它。代碼在這裏：https://github.com/khayrov/khayrov.github.com/tree/master/jsfiddle/knockout-fileapi。

它創建自定義的淘汰賽綁定，有些部分代碼：

HTML：

<input type="file" accept="image/*" data-bind="file: imageFile, fileObjectURL: imageObjectURL, fileBinaryData: imageBinary"/>

淘汰賽JS：

ko.bindingHandlers.file = { 
    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.fileObjectURL && ko.isObservable(bindings.fileObjectURL)) { 
      var oldUrl = bindings.fileObjectURL(); 
      if (oldUrl) { 
       windowURL.revokeObjectURL(oldUrl); 
      } 
      bindings.fileObjectURL(file && windowURL.createObjectURL(file)); 
     } 

     if (bindings.fileBinaryData && ko.isObservable(bindings.fileBinaryData)) { 
      if (!file) { 
       bindings.fileBinaryData(null); 
      } else { 
       var reader = new FileReader(); 
       reader.onload = function(e) { 
        bindings.fileBinaryData(e.target.result); 
       }; 
       reader.readAsArrayBuffer(file); 
      } 
     } 
    }

Unfourtunately我不明白，如果我可以重複使用此代碼，集成它在一些拖放文件上傳組件中？

是否有任何現有的可用於knockout + webapi的DnD文件上傳組件？

來源

2013-10-30 renathy

我雖然在項目中使用的淘汰賽，我不使用自定義它具有約束力，但庫http://blueimp.github.io/jQuery-File-Upload/已被證明對我很好。 – Thewads

看到這個http://jsfiddle.net/3LT9d/

function noopHandler(evt) { 
    evt.preventDefault(); 
    return false; 
} 

ko.bindingHandlers.dropUpload = { 
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
     element.addEventListener('dragenter', noopHandler, false); 
     element.addEventListener('dragover', noopHandler, false); 

     element.addEventListener('drop', function (evt) { 
      evt.preventDefault(); 

      var value = valueAccessor(); 
      for (var i = 0; i < evt.dataTransfer.files.length; i++) { 
       value.push(evt.dataTransfer.files[i]); 
      } 
     }, false); 
    } 
};

它是如何工作的：

的dropUpload自定義綁定填充有被拖動的文件
可觀察到的陣列要上傳的文件，新的API因爲向後兼容似乎不成問題，所以使用FormData。 FormData更容易使用。
按照這篇文章，以瞭解如何讓你的WebAPI接受FORMDATA http://www.asp.net/web-api/overview/working-with-http/sending-html-form-data,-part-2

來源

2013-10-31 11:22:01 LostInComputer

嗯..最好將自定義綁定命名爲dropFiles – LostInComputer

拖放文件上傳（挖空+ webapi + asp.net）

回答

相關問題