javascript flow.js 点击上传文件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/25740110/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 04:56:29  来源:igfitidea点击:

flow.js upload file on click

javascriptasp.net-mvcangularjsflow-js

提问by Simon

Hopefully someone can help with this.

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

Basically, we are using ng-flow https://github.com/flowjs/ng-flowto allow for drag and drop to upload items. We are also using MVC 4.

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

All seems to be working as should, however, we would like to customize this, so that

一切似乎都在正常工作,但是,我们想对其进行自定义,以便

  1. Items are dragged into the upload box and stored in scope (as it does now)
  2. Items are not physically uploaded until a button has been clicked
  1. 项目被拖到上传框中并存储在范围内(就像现在一样)
  2. 在单击按钮之前不会实际上传项目

What have we tried so far? :-

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

in the config, we have disabled the target so that it doesn't upload immediately

在配置中,我们禁用了目标,使其不会立即上传

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

on the actual page, we have created a button, with an ng-click which will pass through the flow.files

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

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

in the controller, we have the function, uploadme, that accepts flows as a paramater. Looping through this paramater and post each "file" to the upload controller

在控制器中,我们有函数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 controller, 'upload'. this get called, however, file is always null

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

Is there something that we are missing? or is there a different way to achieve this.

有什么我们遗漏的吗?或者有没有不同的方法来实现这一点。

回答by Simon

managed to resolve this...

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

remove the line from div tag

从 div 标签中删除该行

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

then onclick of a button, pass in $flow in as a paramater

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

ng-click="InsertItems($flow)"

Javascript:-

Javascript:-

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

回答by Raúl Ota?o

I only want to add a reference to a nice answer to this question: Ng-flow upload programmatically

我只想为这个问题的一个很好的答案添加一个参考: Ng-flow upload programmatically

Hope it helps.

希望能帮助到你。