input 上传多个文件（＜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  
   
   
   
   
   
   
   
 、如果都满足的话














，就提交成功














。

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