Nền tảng: JavaScript - EJ 2 | JavaScript - EJ 2 |
Kiểm soát: Trình tải lên Uploader
Bạn có thể lấy tên tệp cho tệp đã tải lên của thành phần tải lên EJ2 theo các cách sau:
Nhận tên tệp bằng sự kiện đã chọn
Sự kiện đã chọn cho thành phần trình tải lên EJ2 sẽ được kích hoạt cho mỗi lựa chọn tệp. Vì vậy, bạn có thể lấy tên tệp từ các đối số sự kiện đã chọn như hiển thị bên dưới.Selected event for the EJ2 Uploader component will be triggered for every file selection. So, you can get the file name from the selected event arguments as shown below.
[index.html]
[index.ts]
import { Uploader } from '@syncfusion/ej2-inputs';
//Initialize the uploader component
let uploadObj: Uploader = new Uploader[{
asyncSettings: {
saveUrl: '//aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: '//aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
},
selected: onSelect
}];
uploadObj.appendTo['#fileupload'];
function onFileRemove[args] {
args.postRawFile = false;
}
function onSelect[args] {
console.log["Selected File Name is: ", args.filesData[0].name];
}
Nhận tên tệp bằng sự kiện thay đổi
Sự kiện thay đổi cho thành phần trình tải lên EJ2 sẽ được kích hoạt cho mỗi lựa chọn tệp. Vì vậy, bạn có thể lấy tên tệp từ các đối số sự kiện thay đổi như được hiển thị bên dưới.Change event for the EJ2 Uploader component will be triggered for every file selection. So, you can get the file name from the change event arguments as shown below.
[index.ts]
import { Uploader } from '@syncfusion/ej2-inputs';
//Initialize the uploader component
let uploadObj: Uploader = new Uploader[{
asyncSettings: {
saveUrl: '//aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: '//aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
},
change: onChange
}];
uploadObj.appendTo['#fileupload'];
function onFileRemove[args] {
args.postRawFile = false;
}
function onChange[args] {
if[args.files.length != 0]
console.log["Selected File Name is: ", args.file[0].name];
}
Nhận tên tệp bằng phương thức công khai GetFilesData
Phương thức GetFilesData sẽ trả về dữ liệu hiện tại của tệp được hiển thị trong danh sách tệp. Vì vậy, bạn có thể nhận được tên tệp được tải lên từ phương thức GetFilesData trong sự kiện nút bên ngoài nhấp như hiển thị bên dưới.getFilesData method will return the currently present data of the file shown in the file list. So, you can get the uploaded file name from the getFilesData method in the external button click event as shown below.
[index.html]
[index.ts]
import { Uploader } from '@syncfusion/ej2-inputs';
//Initialize the uploader component
let uploadObj: Uploader = new Uploader[{
asyncSettings: {
saveUrl: '//aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: '//aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
}
}];
uploadObj.appendTo['#fileupload'];
function onFileRemove[args] {
args.postRawFile = false;
}
document.getElementById['button'].addEventListener["click", function [e] {
if[this.fileList.length != 0]{
console.log["Selected File Name is: ", this.getFilesData[][0].name];
}
}.bind[uploadObj], false];
Nhận tên tệp bằng biến công khai FileData
Bạn có thể nhận được tên tệp được tải lên bằng biến công khai FileData trong sự kiện nút bên ngoài Nhấp vào sự kiện như hiển thị bên dưới.filesData public variable in the external button click event as shown below.
[index.html]
[index.ts]
import { Uploader } from '@syncfusion/ej2-inputs';
//Initialize the uploader component
let uploadObj: Uploader = new Uploader[{
asyncSettings: {
saveUrl: '//aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: '//aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
}
}];
uploadObj.appendTo['#fileupload'];
function onFileRemove[args] {
args.postRawFile = false;
}
document.getElementById['button'].addEventListener["click", function [e] {
if[this.fileList.length != 0]{
console.log["Selected File Name is: ", this.filesData[0].name];
}
}.bind[uploadObj], false];
Nhận tên tệp bằng cách sử dụng giá trị đầu vào của trình tải lên
Bạn có thể lấy tên của tệp đã chọn từ giá trị đầu vào của thành phần trình tải lên EJ2 trong sự kiện bấm nút bên ngoài như được mô tả bên dưới.input value of the EJ2 Uploader component in the external button click event as described below.
[index.html]
[index.ts]
import { Uploader } from '@syncfusion/ej2-inputs';
//Initialize the uploader component
let uploadObj: Uploader = new Uploader[{
asyncSettings: {
saveUrl: '//aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: '//aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
}
}];
uploadObj.appendTo['#fileupload'];
function onFileRemove[args] {
args.postRawFile = false;
}
document.getElementById['button'].addEventListener["click", function [e] {
if[this.fileList.length != 0]{
console.log["Selected File Name is: ", this.element.value];
}
}.bind[uploadObj], false];
Vui lòng tìm mẫu với các chi tiết được cung cấp.
Liên kết mẫu: //stackblitz.com/edit/cozqth-fx9tdk?file=index.html//stackblitz.com/edit/cozqth-fx9tdk?file=index.html