在我周围找到适用于拖放的代码:
addImage($event) {
// loading the FileList from the dataTransfer
let dataTransfer: DataTransfer = $event.mouseEvent.dataTransfer;
if (dataTransfer && dataTransfer.files) {
// needed to support posting binaries and usual form values
let files: FileList = dataTransfer.files;
// uploading the files one by one asynchrounusly
for (let i = 0; i < files.length; i++) {
let file: File = files[i];
// just for debugging
console.log('Name: ' + file.name + '\n Type: ' + file.type + '\n Size: ' + file.size + '\n Date: ' + file.lastModifiedDate);
// collecting the data to post
let data = new FormData();
data.append('file', file);
data.append('fileName', file.name);
data.append('fileSize', file.size.toString());
data.append('fileType', file.type);
data.append('fileLastMod', file.lastModifiedDate);
// posting the data
let url = 'http://***********.com/gallery/' + this.selectedCategory;
this._http.post(url, data)
.toPromise()
.catch(reason => {
console.log(JSON.stringify(reason));
}).then(result => {
this.getImages();
});
}
}
}
但在我发送图像之前,我希望它们以模态形式预览。
我正在考虑将1个参数用于工作的功能,例如:
previewFile(url) {
let elem = document.createElement("img");
elem.className = "previewImage";
elem.src = url
document.getElementById("previewImages").appendChild(elem);
}
但是如何获取网址?
答案 0 :(得分:1)
使用此代码:
elem.src = URL.createObjectURL(file);