位置: 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是什么文件)

  • 纳税人识别号在哪里能查到
  • 账簿印花税的计税方法
  • 制造业税负率怎么计算
  • 直接人工费用属于固定成本吗
  • 收据怎么粘贴在费用报销单上
  • 桐木板芯销售
  • 外资企业研发中心
  • 政策性用房包括哪些
  • 工业企业电费出售会计分录怎么写?
  • 上年的应收帐款在本年度如何录入?
  • 建筑企业在工程所在地全额征收
  • 银行贷款利息可以减免吗
  • 税局未核定印花税一直没有交怎么办
  • 资本公积转增资本的条件
  • 残保金逾期未申报的税务怎么处理
  • 发票丢失登报声明怎么写
  • 普通发票要写增值税吗
  • 公司购买房屋涉税问题
  • 利润表里的营业成本包括哪些
  • 清算期待摊费用怎么计算
  • 新会计准则下建筑业会计科目设置
  • 英雄联盟中该如何加好友
  • 华为分享怎么用详细教程
  • 如何让游戏速度加快
  • phpstudy配置ftp服务器
  • php .htaccess
  • 禁止input标签输入
  • 工业企业在进行材料采购
  • 出口退税率为0怎么处理
  • php批量更新数据库
  • 工程质保金如何做账
  • batch size 大小
  • 房地产企业营改增是哪一年
  • 跨年费用计入未分配利润
  • 数据 挖掘
  • vue3+antd
  • 模型参数是什么意思
  • php递归函数桃子一天吃一半
  • python编程从入门到精通第三版
  • 印花税没交会怎么样
  • 施工企业的人工费占比
  • 城镇土地使用税优惠政策
  • 办理银行承兑汇票保证金比例
  • python sockets
  • 已抵扣增值税进项税额
  • 场地租赁需要注意什么
  • 增值税普通发票查询真伪
  • 小规模纳税人可以开13的税吗
  • 小规模纳税人如何升级为一般纳税人
  • 企业应付账款的借方余额反映的是
  • 盈余公积的计提基数
  • 用承兑付货款怎么做会计
  • 应收账款的账期是什么意思
  • 什么时候计提增值税发票
  • 公司注销时应付账款怎么处理
  • 新公司办公室装修费怎么记账
  • 产品成本包括哪几个部分
  • 购进销售产品的会计分录
  • 总分类账的记账
  • MySQL部署时提示Table mysql.plugin doesn’t exist的解决方法
  • windows中任务栏
  • win7蓝屏咋办
  • linux 设置文件系统
  • 浏览器8系统怎么打不开主页
  • Win10系统如何开启全部权限
  • Linux Kernel 4.10第5个候选版本RTM版发布 2月12日发布正式版
  • centos mail命令
  • msg是什么文件
  • win7自带软件在哪里
  • css条件语句
  • 原生javascript开发
  • shell脚本对比两个文件夹内的内容
  • ECLIPSE编辑器
  • 方块大作战百科
  • 新能源审核多久
  • 电子发票开票失败怎么回事?
  • 甘肃税务政策
  • 消费税和增值税的异同点
  • 年休假期间工资支付标准
  • 开票系统红色预警情况说明怎么写
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设