input 文件上传的一些操作

文件的上传平常使用input type=“file”使用不过这默认太丑了我们可以调用一下点击

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        span{
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            border-radius: 8px;
            overflow: hidden;
            text-align: center;
            color: white;
            background: red;
            margin: 200px
        }
        </style>
    </head>
    <body>
        <input type="file">
        <span>上传</span>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    </script>
    </html>

简单配置一下结构用jq写简单事件还是很舒服的

在js中绑定事件

      $('span').click(function(){
          $('input').click() =>点击span 触发点击 input  我们可以把input设置成display none 就相当于 点击span上传文件了
      })

新建一个img标签

        <input type="file">
        <span>上传</span>
        <img src="" alt="">  不标记src

介绍一下window.URL

URL对象是硬盘（SD卡等）指向文件的一个路径，如果我们做文件上传的时候，想在没有上传服务器端的情况下看到上传图片的效果图的时候就可是以通过var url=window.URL.createObjectURL(obj.files[0]);获得一个http格式的url路径，这个时候就可以设置到中显示了。

      $('src').attr({'src':window.URL.createObjectURL(obj.files[0])})

这样图片就能显示了吗？答案是不行

在网页加载的时候已经判断了 window下的URL 状态，因此在我们上传的时候需要再次判断，通过input的change方法

      $('input').change(function(ev){   =>可能看起来会有点懵  这里是调用了change 然后又调用了一个函数
        =>所以此处参数稍微有点变化
         var files = ev.target.files;
         var url=window.URL.createObjectURL(files[0])
         $('img').attr({'src':url})
      })

接下来看个简单的直接调用

        <input type="file"  onchange="change(this)"> =>直接绑定函数 注意一定要加参数  要获取数据嘛
        <span>上传</span>
        <img src="" alt="">

在js中定义方法

      function change(e){
          
      }

然后开始编辑

      function change(e){
          var files=e.files
          $('img').attr({'src':window.URL.createObjectURL(files[0])}) =>这样就可以获取到路径了
      }

前面两种方法都可以直接引用方法获取数据不需要加target 然后通过调用change方法需要加上target

得到数据之后就能得到更多的数据啦比如说文件大小

      function change(e){
          var files=e.files
          console.log(e.files[0].size)
          $('img').attr({'src':window.URL.createObjectURL(files[0])})
      }

获取文件更多数据慢慢打印琢磨吧！！！

input 文件上传的一些操作

简单配置一下结构 用jq写简单事件还是很舒服的

介绍一下window.URL

前面两种方法都可以 直接引用方法 获取数据不需要加target 然后通过调用change方法需要加上target

猜你喜欢

简单配置一下结构用jq写简单事件还是很舒服的

前面两种方法都可以直接引用方法获取数据不需要加target 然后通过调用change方法需要加上target