input标签上传文件(一篇搞定)

2024-04-15 用户投稿学习笔记 12阅读

input type="file"美化之所以会谈到input type="file"美化是因为默认的样式实在难以恭维，用过的人都知道，下面对其进行美化。

上传功能分析

//change是当你选中文件，然后点击打开后触发的，这个时候就会触发上传功能 <script type="text/javascript"> function upload(event) { var e=window.event||event; console.log(e) // 获取当前选中的文件 var File = e.target.files[0]; console.log(File);//打印值看下面图片,简单点的话我们直接把这个数据给后台处理就可以了 } </script>

console.log(File)的打印结果： accept=“image/*” 做类型限制，这样在选择文件的时候就只能选择文件类型的图片还有以下的上传文件类型规定

但是上面的限制还是不能阻止一些恶意用户，就算选择类型是图片其实还是可以选择少部分的其他格式例如：.zip 在发送请求之前还需要进行文件类型验证，彻底堵住后台的嘴

//发送数据之前if(['jpeg', 'png', 'gif', 'jpg'].indexOf(File.type.split("/")[1]) < 0) { //用你选择组件的报错弹窗就行，报出以下提醒 alert("上传的文件必须是图片格式"); return;}

当我们要上传所有类型的的文件的时候通过File.type似乎是有点问题，那么这里提供一个稳妥的办法，通过File.name来进行判断

/ 限制文件类型 lastIndexOf倒着查找，substr截取（前闭后开）var fileType = File.name.substr(File.name.lastIndexOf(".")+1);if (['doc', 'docx', 'pdf', 'txt', 'htm', 'html'].indexOf(fileType) < 0) { alert("只支持.doc .docx .pdf .txt .htm .html格式文件"); return; }

上传大小限制上传文件的大小也限制一下，前端做限制很简单，利用之前File打印结果中的size字段，这里API给我们返回的是所选文件的字节数，1KB=1024字节，1MB=1024KB。利用以上，我们加个判断。这里size的单位是字节

var imgMaxSize = 1024 * 1024 * 4; // 4MB图片的字节数if(File.size>imgMaxSize){ alert("您可上传文件的最大限制为4MB"); return;}

特殊情况（参考他人）如果你用的是jquery.ajax,并且你上传的是文档文件，可能ajax会对你的文件进行预处理，然后你就可能遇到如下错误： Illegal invocation这时候我们在ajax里面配置一下选项processData:false, 关掉jquery的预处理就行了，一般这种问题多发生在文档文件上

$.ajax({ type:'POST', url:url, data:formData, contentType:undefined, processData:false, success:function(data){} });

完整代码：

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .file { position: relative; display: inline-block; background: #133d63; border: 0.1rem solid #99d3f5; border-radius: 0.2rem; padding: 0.2rem 0.6rem; overflow: hidden; color: #f0faff; text-decoration: none; text-indent: 0; line-height: 1.5rem; font-size: 0.8rem; margin-left: 7rem; } .file input { position: absolute; font-size: 0.8rem; right: 0; top: 0; opacity: 0; cursor: pointer; } .file:hover { background: #aadffd; border-color: #78c3f3; color: #004974; text-decoration: none; } </style> </head> <body> <div class="file"> 上传文件 <input type="file" name="image" accept="image/*" onchange="upload()"> </div> <script type="text/javascript"> function upload(event) { var e=window.event||event; console.log(e) // 获取当前选中的文件 var File = e.target.files[0]; console.log(File);//打印值看下面图片,简单点的话我们直接把这个数据给后台处理就可以了 var data=new FormData(); data.append("file",File) let refreshToken = localStorage.getItem("token"); axios .post( "http://202.101.162.69:8089/proxy/top/api/upload/oss", data, { headers: { Authorization: refreshToken, }, } ) .then((res) => { if (res.data.code == 200) { this.$message({ message: "上传文件成功", type: "success", center: "true", duration: 500, customClass: "press", }); } else { this.$message({ message: "上传文件失败", type: "warning", center: "true", duration: 500, customClass: "press", }); } } </script> </body></html>

标签：