Javascript 如何使用ng2文件上传获得文件值使用角按钮点击

在这里，我创建了一个文件上传使用ng2文件上传，我删除文件，通常我得到的价值，直到现在它是好的，现在我的问题是，我甚至认为我放置了删除功能，但在删除文件后，我还想检索文件上传值使用按钮点击功能，我如何实现这一点下面是我的代码

注意：这里我需要获取fileList值

目前我正在使用FileDrop方法获取文件列表值，但同时使用按钮单击我需要获取值

import { Component } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';


const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  fileSelectState = {};
  formVisible = true;
  temp: any;

  public showInputForm: boolean = true;
  public selectAll: boolean = true;
  selectedAll: any;


  imga = "http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/Button-Upload-icon.png";

  public uploader:FileUploader = new FileUploader({url: URL});
  public hasBaseDropZoneOver:boolean = false;
  public hasAnotherDropZoneOver:boolean = false;
  public selectedFilesArray = [];
  private selectedFile;



    public selectFile(e: any): void {
    var target = e.target || e.srcElement || e.currentTarget;
    var value = target.innerHTML;
    this.selectedFile = value;
    this.selectAll = true;
    this.selectedFilesArray = [];
    this.selectedFilesArray.push(this.selectedFile);

  }
  public fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;
  }

    public selectAllFiles(e: any): void {

    this.selectedFilesArray = [];
    if (e.target.checked) {

      this.selectAll = true;

      for (var item in this.uploader.queue) {
        this.selectedFilesArray.push(this.uploader.queue[item].file.name);
      }
    }

    for (var item in this.uploader.queue) {
      this.fileSelectState[this.uploader.queue[item].file.name] = e.target.checked
    }


  }
 public fileDropped(fileList: any): void
  {
    for(var i =0 ; i< fileList.length; i++){
        this.fileSelectState[fileList[i].name] = true;
    }

  }

   public fileChecked(e: any): void {
    if (e.target.checked) {
      console.log(this.selectedFilesArray);
      this.selectedFilesArray.push(e.target.value);
      if (this.selectedFilesArray.length > 1) {

        this.selectedFile = e.target.value;


      }
      else {

        this.selectedFile = e.target.value;


      }

    }
    if (!e.target.checked) {

      var index = this.selectedFilesArray.indexOf(e.target.value, 0);
      if (index > -1) {
        this.selectedFilesArray.splice(index, 1);
        if (this.selectedFilesArray.length > 1) {


          this.selectedFile = this.selectedFilesArray[0];


        }
        else if (this.selectedFilesArray.length == 1) {

          this.selectAll = false;
          this.selectedFile = this.selectedFilesArray[0];


        }
        else if (this.selectedFilesArray.length == 0) {

          this.selectedFile = '';


        }
      }

    }



  }

  getInfo(){
    console.log('file info');
  }

}

从'@angular/core'导入{Component}；
从“ng2文件上载”导入{FileUploader}；
常量URL=https://evening-anchorage-3159.herokuapp.com/api/';
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
fileSelectState={}；
formVisible=真；
温度：任何；
public showInputForm:boolean=true；
public-selectAll:boolean=true；
selectedAll:任意；
imga=”http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/Button-Upload-icon.png";
public uploader:FileUploader=新的FileUploader（{url:url}）；
public hasBaseDropZoneOver:boolean=false；
public具有另一个DropZoneOver:布尔值=false；
公共选择的文件数组=[]；
私有选择文件；
public selectFile（e:any）：无效{
var target=e.target | | e.src元素| | e.currentTarget；
var value=target.innerHTML；
this.selectedFile=值；
this.selectAll=true；
this.selectedFilesArray=[]；
this.selectedFilesArray.push（this.selectedFile）；
}
公共文件超库（e:任何）：无效{
this.hasBaseDropZoneOver=e；
}
public selectAllFiles（e:any）：无效{
this.selectedFilesArray=[]；
如果（例如，选中目标）{
this.selectAll=true；
for（此.uploader.queue中的var项）{
this.selectedFilesArray.push（this.uploader.queue[item].file.name）；
}
}
for（此.uploader.queue中的var项）{
this.fileSelectState[this.uploader.queue[item].file.name]=e.target.checked
}
}
公共文件已删除（文件列表：任意）：无效
{
对于（var i=0；i1）{
this.selectedFile=e.target.value；
}
否则{
this.selectedFile=e.target.value；
}
}
如果（！e.target.checked）{
var index=this.selectedFilesArray.indexOf（e.target.value，0）；
如果（索引>-1）{
this.selectedFilesArray.splice（索引，1）；
如果（this.selectedFilesArray.length>1）{
this.selectedFile=this.selectedFilesArray[0]；
}
else if（this.selectedFilesArray.length==1）{
this.selectAll=false；
this.selectedFile=this.selectedFilesArray[0]；
}
else if（this.selectedFilesArray.length==0）{
this.selectedFile=''；
}
}
}
}
getInfo（）{
log（“文件信息”）；
}
}

网址：

---

编辑：OP希望组件范围内的文件对象可用。代码修改如下

存储整个对象，而不仅仅是其name属性。首先，将

fileSelectState

更改为and数组（或者为此使用其他类成员）。然后将

filedrop（）

方法更改为：

public fileDropped(fileList: any): void
  {
    for(var i =0 ; i< fileList.length; i++){
        this.fileSelectState.push(fileList[i]);
    }

  }

更改：

getInfo(){
  console.log('file info');
}

致：

如果需要文件名，请使用以下选项：

this.fileSelectState[0].name

---

点击按钮后你需要什么内容文件列表我一直在使用fileDrop方法获取文件列表，但同时我也希望使用button click同样的方法获取文件列表，但这里fileSelectState在fileDrop方法中不起作用如果你看到这里有文件列表，当文件被删除时，它会获取整个文件的详细信息，如文件名，文件大小等，但哪里是作为文件选择状态获取唯一文件名请检查更新的问题，我张贴的图像，这就是为什么我把免责声明。在问题的开头。然后，我的建议将在稍后输入并编辑到我的答案中。这样就可以了，但之前存在的变量已被大约1000行应用程序使用。fileSelectState[fileList[i].name]=true；因此，基于该逻辑，应用程序以任何方式依赖它，谢谢Randyhoops！抱歉，忘记告诉您将ti更改为数组！！很好的捕获。已编辑以包括更改为数组类型。

getInfo(){
  console.log(this.fileSelectState);
}

this.fileSelectState[0].name