flow.js点击上传文件

Sim*_*mon 5 javascript asp.net-mvc angularjs flow-js

希望有人可以帮助解决这个问题.

基本上,我们使用ng-flow https://github.com/flowjs/ng-flow来允许拖放上传项目.我们也在使用MVC 4.

所有似乎都应该工作,但是,我们想定制这个,所以

  1. 项目被拖入上传框并存储在范围内(就像现在一样)
  2. 在单击按钮之前,不会物理上载项目

到目前为止我们尝试了什么?: -

在配置中,我们已禁用目标,以便它不会立即上载

.config(['flowFactoryProvider', function (flowFactoryProvider) {
flowFactoryProvider.defaults = {
  target: '',
  permanentErrors: [500, 501],
  maxChunkRetries: 1,
  chunkRetryInterval: 5000,
  simultaneousUploads: 1
};
Run Code Online (Sandbox Code Playgroud)

在实际页面上,我们创建了一个按钮,其中ng-click将通过flow.files

<input type="button" value="Click Me" ng-click="uploadme($flow.files)">
Run Code Online (Sandbox Code Playgroud)

在控制器中,我们有函数uploadme,它接受流作为参数.循环遍历此参数并将每个"文件"发布到上传控制器

$scope.uploadme= function (flows)
{
    angular.forEach(flows, function (flow) {
        var fd = new FormData();
        fd.append("file", flow);
        $http.post("upload", fd, {
            withCredentials: true,
            headers: {'Content-Type': undefined },
            transformRequest: angular.identity
        })
    });

}
Run Code Online (Sandbox Code Playgroud)

MVC控制器,'上传'.但是,这个被调用,文件始终为null

public ActionResult upload(HttpPostedFileBase file)
    {
        if (file.ContentLength > 0)
        {
            var fileName = Path.GetFileName(file.FileName);
            var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
            file.SaveAs(path);
        }
        return View();
    } 
Run Code Online (Sandbox Code Playgroud)

有什么东西我们缺少吗?或者有不同的方法来实现这一目标.

Sim*_*mon 10

设法解决这个问题......

从div标签中删除该行

flow-files-submitted="$flow.upload()"
Run Code Online (Sandbox Code Playgroud)

然后点击一个按钮,作为参数传入$ flow

ng-click="InsertItems($flow)"
Run Code Online (Sandbox Code Playgroud)

使用Javascript: -

$scope.InsertItems = function(e)
{
//Do what you need to do
e.upload();
}
Run Code Online (Sandbox Code Playgroud)