jQuery获取上传文件的名称的正则表达式

获取上传文件的名称需要借助于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技术站

(0)
上一篇 2023年5月18日
下一篇 2023年5月18日

相关文章

  • jQWidgets jqxWindow调整大小事件

    下面是jQWidgets jqxWindow调整大小事件的完整攻略: 1. 安装 jQWidgets 首先,你需要安装并引入jQWidgets库,它是一个用于创建现代网页应用程序的UI工具集,支持多种网页技术(HTML5, CSS和JavaScript等)。 你可以通过以下步骤进行安装: 访问jQWidgets官网(https://www.jqwidgets…

    jquery 2023年5月12日
    00
  • jQuery UI Sortable over事件

    jQuery UI 的 Sortable 组件提供了一个 over 事件,该事件在可排序元素被拖动到另一个可排序元素上方时触发。在本教程中,我们将详细介绍 Sortable 的 over 事件的使用方法。 事件基本语法如下: $( ".selector" ).sortable({ over: function( event, ui ) {…

    jquery 2023年5月11日
    00
  • jQWidgets jqxInput rtl属性

    jQWidgets jqxInput rtl属性攻略 简介 jQWidgets 是一个基于 jQuery 的 UI 组件库,提供丰富的 UI和工具用于创建现代化应用程序。jqxInput 组件用于创建一个文本输入框本攻略详细介绍 jqxInput 组件 rtl 属性,包括如何使用和示例。 使用 jqxInput 组件的 rtl 属性用于设置文本输入框的文本方…

    jquery 2023年5月10日
    00
  • jQWidgets jqxProgressBar orientation属性

    以下是关于 jQWidgets jqxProgressBar 组件中 orientation 属性的详细攻略。 jQWidgets jqxProgressBar orientation 属性 jQWidgets jqxProgressBar 组件的 orientation 属性用于设置进度条方向。 语法 $(‘#progressbar’).jqxProgre…

    jquery 2023年5月12日
    00
  • jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

    下面我来详细讲解一下“jQuery通过ajax请求php遍历json数组到table中的代码(推荐)”的完整攻略。 首先,我们需要明确以下几点: AJAX:AJAX(Asynchronous JavaScript and XML)是一种通过JavaScript异步运行HTTP请求的技术。可以在不重新加载整个网页的情况下,与服务器交换数据并更新部分网页内容。 …

    jquery 2023年5月28日
    00
  • JQuery入门—JQuery程序的代码风格详细介绍

    Jquery入门技巧之 JQuery程序的代码风格详细介绍,我将会为大家详细讲解,下面是攻略: 前言 JQuery是应用广泛的前端JS库之一,可以极大地简化JS编程工作,加速前端开发速度,所以熟练使用JQuery是每个前端工程师必修的技能之一。本篇攻略主要介绍JQuery程序的代码风格,旨在使大家编写的JQuery程序更加优雅、健壮、易维护。 基本规范 使用…

    jquery 2023年5月28日
    00
  • 如何用JavaScript或jQuery检查大写锁定是否开启

    检测大写锁定是否开启是一项常见的需求,特别是在需要跟踪用户在输入中使用的字母时。在JavaScript和jQuery中都可以检测大写锁定的状态。 使用JavaScript检查大写锁定状态 JavaScript中可以使用event.getModifierState()方法检测大写锁定状态。该方法返回一个布尔值,如果大写锁定开启,则返回true,否则返回fals…

    jquery 2023年5月13日
    00
  • Jquery解析json字符串及json数组的方法

    下面是关于“Jquery解析json字符串及json数组的方法”的完整攻略: 1. 利用JSON.parse()方法解析JSON字符串 JSON.parse()可以将JSON字符串转换成一个JavaScript对象。使用该方法时,传入的参数必须是一个符合JSON格式的字符串。 下面是一个示例: // 定义一个JSON字符串 var jsonStr = ‘{&…

    jquery 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部