拖放文件上传（挖空+ 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）

回答

相关问题