我正在尝试为角度2实现拖放上传,类似于: http://bootsnipp.com/snippets/featured/bootstrap-drag-and-drop-upload
由于我使用的是角度2,我想使用typescript而不是jquery。我找到了一个名为ng2-file-upload的库,我试图实现拖放功能;但是,我似乎无法让它发挥作用。这就是我所拥有的:
Upload.component.ts
Component({
selector: 'upload',
templateUrl: 'app/components/upload/upload.component.html',
styleUrls: ['app/components/upload/upload.component.css'],
providers: [ UploadService ]
})
export class UploadComponent {
public uploader:FileUploader = new FileUploader({url: URL});
public hasBaseDropZoneOver:boolean = false;
public hasAnotherDropZoneOver:boolean = false;
public fileOverBase(e:any):void {
this.hasBaseDropZoneOver = e;
}
public fileOverAnother(e:any):void {
this.hasAnotherDropZoneOver = e;
}
}
upload.component.html
<section id="dropzone">
<div class="panel panel-default">
<div class="panel-body">
<!-- Standar Form -->
<h4>Select files from your computer</h4>
<br>
<form enctype="multipart/form-data" id="js-upload-form">
<div class="form-inline">
<div class="form-group">
<input type="file" name="files[]" multiple (change)="fileChangeEvent($event)">
</div>
<button type="submit" class="btn btn-sm btn-primary" (click)="upload()">Upload files</button>
</div>
</form>
</div>
</div>
<!-- Drop Zone -->
<h4>Or drag and drop files below</h4>
<br>
<!--<div class="upload-drop-zone" id="drop-zone">-->
<!--Just drag and drop files here-->
<!--</div>-->
<div ng2FileDrop
[ngClass]="{'another-file-over-class': hasBaseDropZoneOver}"
(fileOver)="fileOverBase($event)"
class="well upload-drop-zone">
Drop Files Here
</div>
</section>
upload.component.css
.upload-drop-zone {
color: #ccc;
border-style: dashed;
border-color: #ccc;
line-height: 200px;
text-align: center
}
.another-file-over-class {
border: dashed 3px green;
}
答案 0 :(得分:2)
我认为你错过了在html
中绑定上传者。
<div ng2FileDrop
[ngClass]="{'another-file-over-class': hasBaseDropZoneOver}"
(fileOver)="fileOverBase($event)"
[uploader]="uploader"
class="well upload-drop-zone">
Drop Files Here
</div>