【前端】jquery 原生js的type=‘file‘ multiple=“multiple“，jquery同等获取上传的个数

已于 2024-03-14 16:27:39 修改
阅读量2k 收藏
点赞数
分类专栏： 前端 文章标签： 前端 javascript jquery
于 2019-07-28 15:02:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lmy_520/article/details/97614758
版权

大家好，我是全栈小5，欢迎阅读小5的系列文章。

这是《前端》系列文章，每篇文章将以博主理解的角度展开讲解，

特别是针对知识点的概念进行叙说，大部分文章将会对这些概念进行实际例子验证，以此达到加深对知识点的理解和掌握。

温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！

目录

文件个数

javascript 发展历程

1. 诞生（1995年）

2. IE6时代（1997年 - 2006年）

3. Ajax的兴起（2005年）

4. jQuery的流行（2006年）

5. HTML5和ES5（2009年）

6. Node.js的出现（2009年）

7. ES6及其后续版本（2015年至今）

8. 前端框架的崛起（2010年至今）

9. 现代Web生态系统（2020年至今）

jquery发展历程

1. 诞生（2006年）

2. 版本迭代

3. 流行和广泛应用

4. 移动端支持

5. 社区和插件生态系统

6. 逐渐衰落

文章推荐

前端

CSharp

Sql Server

文件个数

1、document.getElementById(idName)等同于$(this)[0]

2、所以document.getElementById(idName).files.length 等于$(this)[0].files.length

javascript 发展历程

JavaScript的发展历程可以概括为以下几个阶段：

1. 诞生（1995年）

JavaScript最初由Netscape的工程师Brendan Eich在10天内开发出来，用于为Netscape Navigator浏览器添加交互功能。最初命名为LiveScript，后来改名为JavaScript。

2. IE6时代（1997年 - 2006年）

在这个阶段，JavaScript作为一种浏览器端脚本语言开始流行起来。虽然在不同的浏览器中存在着不同的实现，但它的基本语法和功能已经确立。

3. Ajax的兴起（2005年）

Ajax（Asynchronous JavaScript and XML）技术的出现使得JavaScript能够在不重新加载整个页面的情况下向服务器发送请求和接收数据。这一技术的出现极大地提升了Web应用的用户体验。

4. jQuery的流行（2006年）

jQuery是一个JavaScript库，它简化了JavaScript在不同浏览器中的开发，并提供了丰富的DOM操作和动画效果。jQuery的出现加速了Web应用的发展，使得开发人员更容易创建交互丰富的页面。

5. HTML5和ES5（2009年）

HTML5和ECMAScript 5（简称ES5）的发布为JavaScript带来了许多新的特性和API，如Canvas、Web Workers、localStorage等。这一阶段标志着JavaScript开始朝着更加成熟和强大的方向发展。

6. Node.js的出现（2009年）

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，使得开发人员可以使用JavaScript开发服务器端应用程序。Node.js的出现极大地促进了JavaScript的全栈化发展。

7. ES6及其后续版本（2015年至今）

ECMAScript 2015（ES6）是JavaScript的一个重要版本，引入了许多新特性，如箭头函数、类、模块等。自ES6发布以来，ECMAScript每年都会发布一个新版本，持续推动JavaScript语言的发展。

8. 前端框架的崛起（2010年至今）

在近年来，诸如React、Angular、Vue等前端框架的崛起使得JavaScript应用的开发变得更加高效和便捷。这些框架提供了组件化开发、状态管理等功能，极大地推动了前端开发的发展。

9. 现代Web生态系统（2020年至今）

随着现代Web生态系统的不断壮大，JavaScript在各个领域的应用也越来越广泛，包括Web开发、移动应用、桌面应用、游戏开发等。JavaScript已经成为当今最流行的编程语言之一，其发展势头仍在不断加速。

jquery发展历程

jQuery的发展历程可以概括如下：

1. 诞生（2006年）

jQuery由John Resig创建，并于2006年首次发布。它的目标是简化JavaScript在各种浏览器中的开发，并提供一致的API来操作DOM、处理事件等。

2. 版本迭代

jQuery经历了多个版本的迭代，不断改进和完善其功能。其中一些版本引入了重要的功能和改进，如选择器优化、动画效果、AJAX支持等。

3. 流行和广泛应用

随着时间的推移，jQuery迅速成为前端开发中最受欢迎的JavaScript库之一。它的简洁性、跨浏览器兼容性以及丰富的插件生态系统使得它在众多项目中被广泛应用。

4. 移动端支持

随着移动互联网的兴起，jQuery逐渐开始支持移动端开发，并针对移动设备做出了一些优化和改进。

5. 社区和插件生态系统

jQuery拥有一个庞大的开发者社区和丰富的插件生态系统。开发者可以通过使用各种插件来扩展jQuery的功能，从而更好地满足项目需求。

6. 逐渐衰落

随着现代前端开发框架的崛起，如React、Angular、Vue等，以及浏览器原生API的改进，jQuery的使用逐渐减少。许多新项目更倾向于使用更轻量级和现代化的解决方案。

尽管如此，jQuery仍然被许多项目广泛使用，特别是那些遗留项目和需要兼容旧版本浏览器的项目。

文章推荐

前端

【前端】使用javascript开发一个在线RGB颜色转换

【前端】vue3+ts+vite，el-table表格渲染记录重复情况

【前端】vue3+typescript+vite+Element-Plus搭建配置初始化项目结构

【前端】WeUI DatePicker时间组件绑定方法以及chatGPT回答

【前端】参考C站动态发红包界面，高度还原布局和交互

CSharp

【C#】使用代码实现龙年春晚扑克牌魔术（守岁共此时），代码实现篇

【C#】使用代码实现龙年春晚扑克牌魔术（守岁共此时），流程描述篇

【C#】约瑟夫原理举例2个代码实现

【C#】List泛型数据集如何循环移动，最后一位移动到第一位，以此类推

【C#】获取文本中的链接，通过正则表达式的方法获取以及优化兼容多种格式

Sql Server

【Sql Server】通过Sql语句批量处理数据，使用变量且遍历数据进行逻辑处理

【新星计划回顾】第六篇学习计划-通过自定义函数和存储过程模拟MD5数据

【新星计划回顾】第四篇学习计划-自定义函数、存储过程、随机值知识点

【Sql Server】Update中的From语句，以及常见更新操作方式

【Sql server】假设有三个字段a,b,c 以a和b分组，如何查询a和b唯一，但是c不同的记录

【Sql Server】新手一分钟看懂在已有表基础上修改字段默认值和数据类型

总结：温故而知新，不同阶段重温知识点，会有不一样的认识和理解，博主将巩固一遍知识点，并以实践方式和大家分享，若能有所帮助和收获，这将是博主最大的创作动力和荣幸。也期待认识更多优秀新老博主。

全栈小5
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
js_multiple上传文件
12-17
js上文件上传的好插件里面有各种各样的上传文件的种类。
file标签中使用multiple后，在js中获取选择文件的文件名，大小等信息
qq_38136705的博客
07-13 6033
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <
多选下拉列表multiple选择器前后端实现
最新发布
Are_you_kidding_的博客
06-03 414
系统要求设置多选查询，即选择多个对象ID查询它们的数据库存储信息。前端vue使用Element-UI的多选选择器，即在基础选择器是增加multiple属性。本文以查询一个info表为例，前端请求传入ID，后端根据ID查询数据库。
JQuery获得上传文件名称大小类型数量的方法
极客神殿
08-05 1343
本文介绍如何在将文件上传到服务器之前用JQuery获取文件名、文件大小（以字节为单位）、文件类型（文本/ PDF / CSS文件）和总选定文件数量。 基本上，当用户使用输入文件标签选择任何文件时，我们将显示其名称，大小和所选文件的总数。 使用File界面，我们可以获取有关文件的信息并允许访问其内容。 在上传之前显示文件名，大小，计数的步骤 HTML标记：添加具有多个属性的输入标记。 jQuery...
js实现多张图片上传及预览 相册 拍照选择及删除图片
baidu_37366055的博客
02-15 3483
js input file 多图片上传，一次性上传多张图片（前端预览功能）； 运用js实现上传图片前的预览（支持多张图片），网上很多案例都是没有处理每个上传的图片文件名，这里我就增加了图片文件名的方法，删除对应图片的方法，希望亲们可以在项目中用到… 其他input file多文件方法类似，用到FileReader读取文件的方式… 先来个效果图： html结构 js功能 /...
jQuery实现input[type=file]多图预览上传删除等功能
10-16
主要介绍了jQuery实现input[type=file]多图预览上传删除等功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
jQuery动态添加input type=”file”
12-06
有时候需要在页面上允许用户上传多个文件，个数由用户自己决定，个数多了也可以删除，使用jQuery可以很简单的实现这个功能。 先给大家展示下效果图： <!DOCTYPE html> <html> <head> <title&...
jquery获取input type=text中的值的各种方式(总结)
01-21
实例如下： <!DOCTYPE ...<... <...JQuery获取文本框的值</title> <meta http-equiv=Content-Type content=text/html; charset=gb2312 /> <script src=jquery-1.5.1
jQuery fileupload 一次上传多个文件
迷然
10-26 7368
当使用jQuery fileupload上传文件时，设置type=“file”的input的multiple="multiple"属性，可以选择多个文件。但默认上传方式是采用循环提交的方式，一次上传一个文件。如果我们希望多个文件一次性上传，需要修改singleFileUpload为false。
html5中的input(type="file")的multiple属性，实现多文件上传，并用js控制文件大小，数量
热门推荐
kbx8916的博客
11-14 2万+
HTML5中多文件上传时如何客户端控制文件个数和大小 js获取HTML5 多文件file选择的数量 HTML5之File API（一） 前台JS（type=‘file’）读取本地文件的内容，兼容各种浏览器 一
关于JFinal的单个input标签type=file的multiple="multiple"多图片上传，每次只接收到一个uploadFile对象的解决办法。
maguanghui_2012的专栏
03-10 4459
关于JFinal的单个input标签type=file的multiple="multiple"多图片上传，每次只接收到一个uploadFile对象的解决办法。     背景：我开发一个认证图片的上传功能，上传5张图片；我的上传图片的标签写法如下：               注意：form标签要加上method="post" enctype="multipart/form-dat
JS Input File Multiple 文件格式限制
待到秋来九月八，我花开后百花杀。
05-17 2322
var format = "png,jpg,gif"; function limitFileFormat(files,format){ var length = files.length; var temp = ""; for (var i = 0; i < length; i++
Jquery 获取对象的几种方式介绍
xsf1840的博客
09-09 541
JQuery的核心的一些方法  each(callback) '就像循环  $("Element").length; ‘元素的个数，是个属性  $("Element").size(); '也是元素的个数，不过带括号是个方法  $("Element").get(); ‘某个元素在页面中的集合，以数组的形式存储  $("Element").get(index); '功能和上面的相同，inde
[HTML]增加input标签的multiple属性上传的文件数
weixin_30483697的博客
08-24 269
1、发现问题 <input type="file" name="myfile[]" multiple="multiple"/> 最多只能上传20个文件 2、解决问题 最多只能上传20个文件的原因： php.ini中的max_file_uploads = 20 转载于:https://www.cnblogs.com/qq106928...
jquery多文件上传
小杰杰的博客
06-04 341
multiple=“multiple” 在input file 标签中加入multiple="multiple"属性 就能愉快的多选文件了
jq监听input type="file"发生改变，即选择文件,并获取文件名称
沉睡的博客
05-22 2405
jq监听input type="file"发生改变，即选择文件,并获取文件名称 <input id="fileupload" name="file" onchange="fileChange(event)" style="display: none" type="file"/> function fileChange(e) { console.log(e); ...
[jQuery]选择框(select),多选取值(multiple)
jameskaron的专栏
03-29 2176
'#message_delivery_status option:selected').each(function(){ status.push($(this).val()) }) return status.join(","); }   js方式: function getMsgDelStaValue() { var status=[]; var obj = document.getElementById("xxxx");
jQuery动态添加input type=file文件上传域并配合ajax上传文件
05-26
可以使用以下代码实现 jQuery 动态添加 input type=file 文件上传域并配合 ajax 上传文件。 HTML 代码： ```html <div id="file-list"></div> <button id="add-file">添加文件</button> ``` JavaScript 代码： ```javascript $(function() { var fileList = $('#file-list'); var addButton = $('#add-file'); addButton.on('click', function() { var fileInput = $('<input type="file" name="file">'); var removeButton = $('<button>删除</button>'); var listItem = $('<div></div>').append(fileInput).append(removeButton); fileList.append(listItem); removeButton.on('click', function() { listItem.remove(); }); fileInput.on('change', function() { var file = fileInput[0].files[0]; if (file) { var formData = new FormData(); formData.append('file', file); $.ajax({ url: '/upload', type: 'POST', data: formData, processData: false, contentType: false, success: function(data) { console.log('上传成功'); } }); } }); }); }); ``` 具体实现步骤如下： 1. 创建一个包含文件列表的容器和添加文件按钮。 2. 给添加文件按钮绑定一个点击事件，动态创建一个 input type=file 文件上传域和删除按钮，将它们添加到文件列表容器中。 3. 给删除按钮绑定一个点击事件，当点击时将该文件上传域从文件列表容器中删除。 4. 给文件上传域绑定一个 change 事件，当选择了文件时，创建一个 FormData 对象，将选中的文件添加到其中，然后通过 ajax 发送到服务器。 5. 在 ajax 的 success 回调函数中处理上传成功后的逻辑。 注意，要设置 processData 和 contentType 为 false，这样 jQuery 就会将 FormData 对象中的数据直接发送到服务器，而不是将其转换为字符串发送。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈小5

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值