js怎么获取上传文件的名称,格式以及大小
墨初 Web前端 883阅读
前端web上传文件时,需要在上传之前判断一下文件的基本信息,比如文件的大小,文件的类型等等。下面博文中73so博客就和大家说一说如何使用js代码来获取到文件的这些信息。
js获取上传文件类型的方法
示例代码:
<!--表单数据--> <form name="form1" id="form1"> <input type="file" id="btn_file" name="file"></input> <input type="button" id="btn" value="提交"> </form> <script> // 73so.com var btn=document.querySelector("#btn"); btn.onclick=function(){ var file = document.getElementById('btn_file').files[0]; //定义可上传文件的类型 var file_ypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"]; //获取文件的后缀名 // file.name 为上传文件的名称 var type = file.name.substring(file.name.indexOf(".")); //判断上传的文件是否可上传 if(file_ypes.indexOf(type) != -1){ console.log('可以上传'); }else{ console.log('禁止上传'); } } </script>
js获取上传文件大小的方法
示例代码:
<!--表单数据--> <form name="form1" id="form1"> <input type="file" id="btn_file" name="file"></input> <input type="button" id="btn" value="提交"> </form> <script> // 73so.com var btn=document.querySelector("#btn"); btn.onclick=function(){ var file = document.getElementById('btn_file').files[0]; // 输出文件的大小,这里的大小是以字节为单的,需要我们自行转换为kb,或mb console.log(file.size); //判断文件是否过大 // 下面判断文件是否超过 1m 大小 1M的大小划算为:1024 * 1024 = 1048576 if(file.size > 1048576){ alert('文件超过 1M 大小,不允许上传!'); return false; } } </script>