flow.js点击上传文件

时间:2014-09-09 08:39:55

标签: javascript asp.net-mvc angularjs flow-js

希望有人可以帮忙解决这个问题。

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

所有似乎都应该正常工作,但是,我们想要自定义,以便

  1. 将项目拖入上传框并存储在范围内(就像现在一样)
  2. 在点击按钮之前,物品不会实际上传
  3. 到目前为止我们尝试了什么? : -

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

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

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

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

    在控制器中,我们有函数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
            })
        });
    
    }
    

    MVC控制器,'上传'。但是,这个被调用,文件总是为空

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

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

2 个答案:

答案 0 :(得分:10)

成功解决了这个问题......

从div标签中删除该行

flow-files-submitted="$flow.upload()"

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

ng-click="InsertItems($flow)"

使用Javascript: -

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

答案 1 :(得分:2)

我只想添加对这个问题的一个很好的答案的引用: Ng-flow upload programmatically

希望它有所帮助。