Html -- jQuery ajax实现文件上传，并隐藏 input 文件框

最新推荐文章于 2021-08-06 11:12:59 发布

@程序员

最新推荐文章于 2021-08-06 11:12:59 发布

阅读量474

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/sky_eyeland/article/details/102697274

版权

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、html 文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="plugins/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .img-box{
                width: 70px;height: 70px; position: absolute;border: 1px solid #ddd;
            }
            .img-box img{
                width: 70px;height: 70px;
            }
            .img-box .img-input{
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="img-box">
            <input type="hidden" name="jyhlSystemImg" value=""/>
            <img src="images/emptyImg.png" onclick="selectSystemImg(this)">
            <input type="file" class="img-input" onchange="selectSystemFile(this)"/>
        </div>
    </body>
    <script type="text/javascript">
    function selectSystemFile(_this) {
      var formData = new FormData();
      formData.append("file",$(_this)[0].files[0]);
      $.ajax({
          url:'upload/image',
          type:'post',
          data: formData,
          contentType: false,
          processData: false,
          success:function(response){
              
          }
      })
    }
        
    function selectSystemImg(_this) {
        $(_this).next().click();
    }
    </script>
</html>