在Angular 4组件中使用Dropify文件输入

Question

我想在Angular 4项目中使用Dropify组件。但是，在将.dropify类应用于input后，我得到的是使用“选择文件”按钮和文件名标签的默认文件输入。如何将Dropify拖放文件输入显示？

根据Dropify的要求，我在各自的位置包含了JQuery和Dropify的脚本，样式表和字体：

• jquery.min.js包含在.angular-cli.json的{​​{1}}数组
中
• apps.scripts包含在dropify.min.js的{​​{1}}数组
中
• .angular-cli.json包含在apps.scripts的{​​{1}}数组
中
• Roboto字体（Dropify所需）dropify.css .angular-cli.json

apps.styles：

@import

src/styles.css：

src/app/app.component.html

... <div style="padding-bottom: 1.25em;"> <input type="file" id="input" class="dropify" data-allowed-file-extensions="csv" formControlName="studentList" required> </div> ... ：

src/app/app.component.ts

import {Component, OnInit} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; declare var $: any; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { ... ngOnInit() { ... const dragAndDrop = $('.dropify').dropify({ messages: { 'default': 'Drag and drop a CSV file here or click' } }); ... } ... } ：

src/styles.css

Answer 1

没有任何错误，无法为您提供任何解决方案。但我在这里给出一个示例用例。它可能会对你有帮助。

1. <input type="file" (change)="imageChanged($event)" class="dropify" accept=".png, .jpg, .jpeg" data-allowed-file-extensions="jpg png jpeg" data-max-file-size="300K">

2. 将.js和.css文件添加到.angular-cli.json或索引文件。

3. HTML输入元素declare var $: any;

<。li文件中的

4. ngOnInit() { $('.dropify').dropify({}); }

5. {{1}}

就是这样。

Answer 2

我在Angular 4中遇到了与JQuery类似的问题，通过在app.component.ts中添加另一个声明来解决它：

declare var jquery:any; 希望它有效！