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

Question

我想使用 Dropify我的 Angular 4 项目中的组件。但是，将 .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 数组中
• Roboto 字体(Dropify 所需)在 src/styles.css 中@import编辑

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"
    ],
    ...
  }
  ...
}

Answer 1

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

1. npm install dropify --save

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

3. 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">

4. 在 .ts 文件中 declare var $: any;

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

就是这样。