以角度 2 拖放带有图像预览的图像
Drag and drop image with image preview in angular2+
这里是 stackblitz link:- https://stackblitz.com/edit/angular6-ledera?file=app%2Fapp.component.ts
我正在尝试从桌面等直接拖放图像并放在拖放区 div。
1) 获取图片预览
2) 获取文件对象。
.html
<div *ngIf="!imageDrop" class="col-12 rmpm dropzone" appDrag>
<div class="text-wrapper">
<div class="centered">Drop your file here!</div>
</div>
</div>
<!--droped image preview-->
<img *ngIf="imageDrop" [src]="imageDrop" width="100px" height="100px">
dragDrop.directive.ts
@HostBinding("style.background") private background = "#eee";
constructor() {}
@HostListener("dragover", ["$event"]) public onDragOver(evt) {
evt.preventDefault();
evt.stopPropagation();
this.background = "#999";
console.log( '4444:::' + JSON.stringify(evt.target.files));
}
@HostListener("dragleave", ["$event"]) public onDragLeave(evt) {
evt.preventDefault();
evt.stopPropagation();
this.background = "#eee";
console.log( '222:::' + JSON.stringify(evt.target.files));
}
@HostListener("drop", ["$event"]) public onDrop(evt) {
evt.preventDefault();
evt.stopPropagation();
let files = evt.dataTransfer.files;
if (files.length > 0) {
this.background = "#eee";
console.log( '1111:::' + JSON.stringify(files));
console.log( '33333:::' + JSON.stringify(evt.target.files));
}
}
Here is a Stackblitz demo for the file drop.
该指令处理一次放置的一个或多个文件。
它以文件列表作为参数触发一个files
事件,每个文件都包装在一个包含file and a SafeUrl for the blob created with window.URL.createObjectURL(file).
的FileHandle
界面中
export interface FileHandle {
file: File,
url: SafeUrl
}
@HostListener('drop', ['$event']) public onDrop(evt: DragEvent) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#eee';
let files: FileHandle[] = [];
for (let i = 0; i < evt.dataTransfer.files.length; i++) {
const file = evt.dataTransfer.files[i];
const url = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(file));
files.push({ file, url });
}
if (files.length > 0) {
this.files.emit(files);
}
}
消费组件然后可以使用为每个文件创建的 Url 显示图像列表。
<div *ngFor="let file of files">
<img *ngIf="file" [src]="file.url" width="100px" height="100px">
</div>
希望对您有所帮助。
这里是 stackblitz link:- https://stackblitz.com/edit/angular6-ledera?file=app%2Fapp.component.ts
我正在尝试从桌面等直接拖放图像并放在拖放区 div。
1) 获取图片预览 2) 获取文件对象。
.html
<div *ngIf="!imageDrop" class="col-12 rmpm dropzone" appDrag>
<div class="text-wrapper">
<div class="centered">Drop your file here!</div>
</div>
</div>
<!--droped image preview-->
<img *ngIf="imageDrop" [src]="imageDrop" width="100px" height="100px">
dragDrop.directive.ts
@HostBinding("style.background") private background = "#eee";
constructor() {}
@HostListener("dragover", ["$event"]) public onDragOver(evt) {
evt.preventDefault();
evt.stopPropagation();
this.background = "#999";
console.log( '4444:::' + JSON.stringify(evt.target.files));
}
@HostListener("dragleave", ["$event"]) public onDragLeave(evt) {
evt.preventDefault();
evt.stopPropagation();
this.background = "#eee";
console.log( '222:::' + JSON.stringify(evt.target.files));
}
@HostListener("drop", ["$event"]) public onDrop(evt) {
evt.preventDefault();
evt.stopPropagation();
let files = evt.dataTransfer.files;
if (files.length > 0) {
this.background = "#eee";
console.log( '1111:::' + JSON.stringify(files));
console.log( '33333:::' + JSON.stringify(evt.target.files));
}
}
Here is a Stackblitz demo for the file drop.
该指令处理一次放置的一个或多个文件。
它以文件列表作为参数触发一个files
事件,每个文件都包装在一个包含file and a SafeUrl for the blob created with window.URL.createObjectURL(file).
FileHandle
界面中
export interface FileHandle {
file: File,
url: SafeUrl
}
@HostListener('drop', ['$event']) public onDrop(evt: DragEvent) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#eee';
let files: FileHandle[] = [];
for (let i = 0; i < evt.dataTransfer.files.length; i++) {
const file = evt.dataTransfer.files[i];
const url = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(file));
files.push({ file, url });
}
if (files.length > 0) {
this.files.emit(files);
}
}
消费组件然后可以使用为每个文件创建的 Url 显示图像列表。
<div *ngFor="let file of files">
<img *ngIf="file" [src]="file.url" width="100px" height="100px">
</div>
希望对您有所帮助。