位置: IT常识 - 正文

<input type=“file“>实现上传文件(inputtypefile 文件名)

编辑:rootadmin
<input type=“file“>实现上传文件

推荐整理分享<input type=“file“>实现上传文件(inputtypefile 文件名),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:中给固定值,input type="file"录音有兼容问题么,input type="file"录音有兼容问题么,input type="file"录音有兼容问题么,的概念,的概念,,,内容如对您有帮助,希望把文章链接给更多的朋友!

嗨害嗨,我又来了奥。今天讲一个项目中常见的例子,就是利用input type="file"来进行表单上传文件。首先,我们写好html,如下。

<form id="form1" action="/" method="post" enctype="multipart/form-data"> <div> <label for="profile_pic">Choose file to upload</label> <input multiple="multiple" type="file" id="profile_pic" name="profile_pic" accept=".jpg,.jpeg,.png"> </div> <div> <button type="button" id="btn">提交</button> </div> </form>

这外面是一个form表单,method方法为post,action属性规定当提交表单时,向何处发送表单数据。(这是必需的属性),我们这里直接用‘/’代替了。enctype是encode type的缩写,就是编码类型的意思。默认情况下,enctype的值是application/x-www-form-urlencoded,不能用于文件上传,只有使用了multipart/form-data,才能完整的传递文件数据。

<input type=“file“>实现上传文件(inputtypefile 文件名)

然后我们可以利用input type="file"来点击上传文件,multiple为多种多样的,在这里是代表可以上传多个文件(按住ctrl键就可以进行多选)。accept可以限制文件的上传类型,比如只上传图片文件、视频文件、音频文件等等。然后我们点击这个按钮,在没有写type="button"的时候,会发现不用写js直接就可以提交。为什么呢?原来button有一个type属性,而type有三个可选属性:button,submit,reset,而button按钮的type属性默认值是submit ,所以在没有指定type属性的情况下,点击button按钮触发提交form表单。解决:给button添加type属性,属性值设为button,问题就解决了。

现在写js进行表单验证,代码如下:

const btn = document.getElementById("btn"); const form1 = document.getElementById("form1"); const pic = document.getElementById("profile_pic"); btn.onclick = function () { //如果文件输入框的文件的长度为0,则弹出警告 if (pic.files.length == 0) { alert("请先至少选择一个文件!"); return; } //提交文件 HTMLFormElement.submit() 用来提交表单 <form>。 //判断文件是否符合要求 for (let i = 0; i < pic.files.length; i++) { console.log(i); //0 1 2 3 if (!checkFormat(pic.files[i])) { alert("请确保上传的文件符合要求(.jpg/.png/.jpeg)") return } } alert("上传成功!") form1.submit(); } function checkFormat(o) { let filename = o.name;//文件名称 let suffix = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase(); //png jpg等 let file_format = ['jpg', 'png', 'jpeg']; //看看这个后缀存不存在于file_format数组当中 if (file_format.includes(suffix)) { return true } return false }

1、首先获取按钮,表单和input[type="file"]的dom对象,点击按钮的时候,判断:如果文件输入框的文件的长度为0,则弹出警告,然后return禁止提交。 

2、随后,有文件的情况下,点击提交会判断文件格式是否满足要求。这里封装了一个方法(checkFormat),参数是一个对象,如果对象的name中最后一个"."的后缀名为规定的数组里面的值的话,就返回true,否则返回false。这里用到了ES6新特性中的includes方法,判断这个后缀名是否在这个数组里面。如果有一个不在,则弹出警告:请确保上传的文件符合要求(.jpg/.png/.jpeg),再return禁止提交。

3、如果都满足的话,就提交成功。

如果有什么疑问,欢迎在评论区一起讨论,咱们下次见!

本文链接地址:https://www.jiuchutong.com/zhishi/284103.html 转载请保留说明!

上一篇:最贵的京东商品是什么(京东最贵的商品排行)

下一篇:fpdisp5a.exe是什么进程 有什么作用 fpdisp5a进程查询(fp是什么文件)

  • iqoo怎么关闭开发者模式(iqoo怎么关闭开机声音)

    iqoo怎么关闭开发者模式(iqoo怎么关闭开机声音)

  • 华为mate30会用90hz屏幕吗(华为mate30最高支持多少瓦充电)

    华为mate30会用90hz屏幕吗(华为mate30最高支持多少瓦充电)

  • 苹果11来信息信号灯亮怎么设置(苹果11来信息怎么不显示出来)

    苹果11来信息信号灯亮怎么设置(苹果11来信息怎么不显示出来)

  • 显卡硅脂多久换一次(显卡硅脂涂多厚)

    显卡硅脂多久换一次(显卡硅脂涂多厚)

  • 自己配电脑需要买些什么(自己配电脑需要买什么)

    自己配电脑需要买些什么(自己配电脑需要买什么)

  • 32位计算机中的32是指(32位计算机中的32是指下列技术指标中的)

    32位计算机中的32是指(32位计算机中的32是指下列技术指标中的)

  • 电脑QQ登录不上怎么办(电脑QQ登录不上去)

    电脑QQ登录不上怎么办(电脑QQ登录不上去)

  • 手机投屏需要流量吗(手机投屏用不用流量)

    手机投屏需要流量吗(手机投屏用不用流量)

  • word艺术字样式怎么设置(word艺术字样式在哪里第几行第几列)

    word艺术字样式怎么设置(word艺术字样式在哪里第几行第几列)

  • ipad 型号a1701是哪一款(ipad a1701是几代)

    ipad 型号a1701是哪一款(ipad a1701是几代)

  • 电子和机械的物理实体称为(电子与机械的区别)

    电子和机械的物理实体称为(电子与机械的区别)

  • 微信如何开启朋友验证功能(微信如何开启朋友圈三天可见)

    微信如何开启朋友验证功能(微信如何开启朋友圈三天可见)

  • 快手无法登录是怎么回事(快手无法登陆)

    快手无法登录是怎么回事(快手无法登陆)

  • 如何把嘿siri改成别的(如何把嘿siri改成别的叫法)

    如何把嘿siri改成别的(如何把嘿siri改成别的叫法)

  • 荣耀v30出厂配件有没有耳机(荣耀v30手机配件)

    荣耀v30出厂配件有没有耳机(荣耀v30手机配件)

  • 路由器被关掉怎么开启(路由器关掉怎么开)

    路由器被关掉怎么开启(路由器关掉怎么开)

  • 4k超清什么意思(4k是超清吗)

    4k超清什么意思(4k是超清吗)

  • w10开机0x0000001原因(win10开机0xc000000f怎么修复)

    w10开机0x0000001原因(win10开机0xc000000f怎么修复)

  • 荣耀v20手机防水吗(荣耀x20防水)

    荣耀v20手机防水吗(荣耀x20防水)

  • 华为智慧能力是什么功能(华为智慧能力是干嘛的 知乎)

    华为智慧能力是什么功能(华为智慧能力是干嘛的 知乎)

  • 怎么把美团闪付卡取消(怎么把美团闪付关掉)

    怎么把美团闪付卡取消(怎么把美团闪付关掉)

  • m.2接口和sata3区别(m.2接口和sata3接口固态硬盘对比)

    m.2接口和sata3区别(m.2接口和sata3接口固态硬盘对比)

  • vio手机忘记密码中的两个问题怎么修改(vio手机忘记密码怎么破解?)

    vio手机忘记密码中的两个问题怎么修改(vio手机忘记密码怎么破解?)

  • 毫米波雷达的硬件架构与射频前端(毫米波雷达的硬件构成)

    毫米波雷达的硬件架构与射频前端(毫米波雷达的硬件构成)

  • Python计算机视觉———照相机标定

    Python计算机视觉———照相机标定

  • 厂房出租开发票怎么交税
  • 哪些费用可以放到研发费用中
  • 小规模企业申报时间
  • 资产负债表期末数是本年累计数吗
  • 建筑企业结转成本怎么算
  • 报验户与正常户的区别
  • 进项认证勾选在哪里操作
  • 代开了专票,但是销售额没有超过30万怎么处理
  • 人工成本比例
  • 纳税申报表销售额可以是负数吗
  • 销售产品货款存入银行是什么凭证
  • 银行卡待报解预算收入是什么钱
  • 购买商标权税率多少
  • 独立核算的生产车间是法律主体吗
  • 核定征收所得税税率
  • 股权继承印花税单方交
  • 为什么电脑上找不到蓝牙耳机
  • 应收账款账龄分析简单例题
  • 服务,不动产和无形资产扣除项目明细
  • 员工两处取得工资收入
  • 采购过程中产生的物流成本案例分析
  • 旧macbookpro
  • 常见内存大小
  • 抵押和质押的区别主要表现在哪些方面
  • 电脑右下角弹出网页没有×怎么关闭
  • 住房贷款利息支出专项附加抵扣
  • 新西兰萨摩亚人
  • 材料委托加工
  • 差旅费报销管理规定2022
  • 计提房产税会计分录怎么做账
  • 房地产消防工程入什么科目
  • 上月未开发票的销项税,已经申报缴税,在本月开了票,应该如何填报?
  • ChatGLM-6B:颠覆聊天AI的全新模型
  • 数学建模 比赛
  • php自动载入文件的函数
  • 购买研发设备可以直接列入研发开支不
  • 非营利组织能否开社保账户
  • 收到员工交来现金怎么入账
  • 其他收益结转到什么账户
  • 自然人独资和个人独资是一样的吗
  • 公帐的钱可以转到其他人帐户吗
  • 投资者控股性质
  • 出差的招待费算差旅费
  • sql-server
  • 企业转钱给个人
  • 其他综合收益相关分录
  • 小规模纳税人减免增值税会计处理
  • 应收账款的账龄怎么分析
  • 在建工程的土地可以查封吗
  • 待处理财产损益是什么意思
  • 甲企业持有乙企业40%的股权,能够对乙企业
  • 银行卡定期存款怎么取出来
  • 开会旅游的费用是多少
  • 计提固定资产折旧怎么做会计科目
  • 建筑业预交税金会计分录
  • 计提工资的核算流程
  • 社保缴费基数调整后对个人的影响
  • 企业去银行
  • 市政配套费减免政策
  • 管理费用属于什么成本
  • 房地产行业人工成本占比
  • 国库单一账户体系包括哪些账户
  • SQL Transcation的一些总结分享
  • 苹果序列号查询
  • nfs安装配置
  • cortanawin10在哪
  • centos安装问题
  • node·js
  • android.json
  • linux里面vim
  • jquery制作简单的网页
  • js日期格式
  • pythoni脚本
  • shell 编程 怎么运行命令
  • python库怎么用
  • 税务行政处罚一般程序和简易程序的区别
  • 委托代销清单怎么写
  • 百望税控盘电子发票开好了如何打印及导出发票
  • 重庆车牌号申请
  • 广东省通用机打发票怎么开
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设