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

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

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


jquery.min.js的.angular-cli.json数组中包含的apps.scripts
dropify.min.js的.angular-cli.json数组中包含的apps.scripts
dropify.css的.angular-cli.json数组中包含的apps.styles
@import中src/styles.css需要的Roboto字体（Dropify所需）


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：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~http://fonts.googleapis.com/css?family=Roboto:400,300,700,900|Roboto+Condensed:400,300,700";

.angular-cli.json：

{
  ...
  "apps": {
    ...
    "styles": [
      "styles.css",
      "../node_modules/dropify/dist/css/dropify.css"
    ],
    "scripts": [
      "../node_modules/jquery/dist/jquery.min.js",
      "../node_modules/dropify/dist/js/dropify.min.js"
    ],
    ...
  }
  ...
}

最佳答案

没有任何错误，就不可能给您任何解决方案。但是我在这里给出了一个示例用例。它可能会帮助您。


npm install dropify --save
将.js和.css文件添加到.angular-cli.json或索引文件中。
HTML输入元素<input type="file" (change)="imageChanged($event)" class="dropify" accept=".png, .jpg, .jpeg" data-allowed-file-extensions="jpg png jpeg" data-max-file-size="300K">
在.ts文件declare var $: any;中
ngOnInit() { $('.dropify').dropify({}); }


就是这样。

关于jquery - 在Angular 4组件中使用Dropify文件输入，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47244659/