如何使用文件上传选项在angular2中进行简单的自定义拖放功能 [英] How to make simple customized drag and drop functionality in angular2 with file upload option
问题描述
请检查HTML代码文件
Please check the code HTML file
<div class='multiple'><span *ngFor="let filename of fileList" class="fileLoaded">{{filename}}<dew-icon [options]="{icon:'cross'}" (click)="deleteItem(filename)" class="file-close"></dew-icon>
</span>
</div>
<label for="file-upload-{{Id}}" class="custom-file-upload">
<span><dew-icon class='sizeIcon' [options]="{icon:'lnr lnr-move'}"></dew-icon></span>
<i class="fa fa-cloud-upload"></i> Drag and Drop /Browse
</label>
<input accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,text/plain,image/jpeg,image/gif,image/png,image/tiff,image/vnd.dwg,application/zip,application/x-rar-compressed,application/step,application/iges" id="file-upload-{{Id}}" multiple (change)="onChange($event)" sm="25" type="file" />
请检查代码ts文件
从'@ angular / core'导入{Component，OnInit，Input，Output，EventEmitter};
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'dew-file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.less']
})
export class FileUploadComponent implements OnInit {
@Input() Id: String;
public fileList = [];
constructor() {
}
@Output() fileObject = new EventEmitter();
ngOnInit() {
}
onChange(event: any) {
let files = [].slice.call(event.target.files);
// input.value = files.map(f => f.name).join(', ');
let multFile = files.map(f => f.name);
for (let entry of multFile) {
var found = false;
for (let existFile of this.fileList) {
console.log(entry.indexOf(existFile));
if (entry.indexOf(existFile) != -1) {
found = true;
}
}
if (found == false) {
this.fileList.push(entry);
}
}
this.fileObject.emit(files);
}
deleteItem(obj) {
for (let i = 0; i < this.fileList.length; i++) {
if (obj == this.fileList[i]) {
this.fileList.splice(i, 1);
break;
}
}
}
}
请让我知道如何实现拖放功能以及文件上传。
Please let me know how to implement the drag and drop functionality together with the file upload.
推荐答案
用于拖放功能，您可以使用Angular的组件库！
查看以下三个选项之一：
For drag and drop functionality, you can use Angular's component libraries! Check out any of these three:
此外，Angular组件库还包含文件上传选项：
Additionally, the Angular component libraries contain file-upload options as well:
有很多方法可以实现所需的功能，但是利用其中一些组件应该可以使您的生活更加轻松。
There are many ways to implement your desired functionality, but utilizing some of these components should make your life much easier.
安装每个组件的离子过程和实现在各自存储库中的README.md文件中进行了说明！
The installation process and implementation for each of these components is explained in the README.md files in their respective repositories!
祝您好运！
这篇关于如何使用文件上传选项在angular2中进行简单的自定义拖放功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
