获取上传文件的名称需要借助于HTML5新增的FileAPI,其可以通过传递一个参数files来获取文件的名称,类型等信息。而在jQuery中,可以通过表单的选择器来获取文件的input框,并通过js的FileReader对象读取文件。以下是获取上传文件名称的正则表达式攻略:
第一步:获取文件上传的input框
先获取文件上传的input框,假设input的id为fileInput,可以用jQuery的选择器获取该元素:
let fileInput = $('#fileInput');
第二步:通过FileReader对象获取文件
let file = fileInput[0].files[0]; // 获取用户上传的文件
let reader = new FileReader(); // 创建FileReader对象
reader.readAsDataURL(file); // 读取文件
此时,reader对象的result属性就是整个文件的数据(dataURL格式),可以通过正则表达式来截取文件名。
第三步:使用正则表达式获取文件名
使用正则表达式来截取文件名,可以使用下列代码:
let fileName = file.name; // 获取文件名
let suffix = fileName.substr(fileName.lastIndexOf('.') + 1); // 获取文件后缀名
let reg = new RegExp(`\\${suffix}$`, 'i'); // 生成正则表达式匹配规则
let name = fileName.replace(reg, ''); // 截取文件名
console.log(name); // 输出文件名
上述代码中的正则表达式是根据文件后缀名来匹配的,用到了字符串的截取方法和正则表达式。
以下是一个完整的jQuery获取上传文件名称的示例1:
let fileInput = $('#fileInput');
let file = fileInput[0].files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function() {
let fileName = file.name;
let suffix = fileName.substr(fileName.lastIndexOf('.') + 1);
let reg = new RegExp(`\\${suffix}$`, 'i');
let name = fileName.replace(reg, '');
console.log(name);
};
以下是一个完整的jQuery获取上传文件名称的示例2:
$(document).on('change', '#fileInput', function() {
let file = this.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function() {
let fileName = file.name;
let suffix = fileName.substr(fileName.lastIndexOf('.') + 1);
let reg = new RegExp(`\\${suffix}$`, 'i');
let name = fileName.replace(reg, '');
console.log(name);
};
});
上述代码在input框的change事件中执行,可以做到即时获取上传文件名称。
以上就是获取上传文件名称的正则表达式攻略的完整介绍和两个示例说明。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery获取上传文件的名称的正则表达式 - Python技术站