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

最新推荐文章于 2024-08-12 16:30:53 发布

南朝听月

最新推荐文章于 2024-08-12 16:30:53 发布

阅读量1.3w

点赞数 10

分类专栏：实战技巧文章标签：上传 input上传文件前端

本文链接：https://blog.csdn.net/weixin_43131046/article/details/114301000

版权

实战技巧专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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

<!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);//打印值看下面图片,简单点的话我们直接把这个数据给后台处理就可以了
            }
    </script>
  </body>
</html>

上传功能分析

//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/*” 做类型限制，这样在选择文件的时候就只能选择文件类型的图片
还有以下的上传文件类型规定

<input type="file" accept=".doc,.docx,.pdf,.txt,.htm,.html" />

但是上面的限制还是不能阻止一些恶意用户，就算选择类型是图片其实还是可以选择少部分的其他格式例如：.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>