位置: IT常识 - 正文
推荐整理分享<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"来点击上传文件,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、如果都满足的话,就提交成功。
如果有什么疑问,欢迎在评论区一起讨论,咱们下次见!
下一篇:fpdisp5a.exe是什么进程 有什么作用 fpdisp5a进程查询(fp是什么文件)
友情链接: 武汉网站建设