Html -- jQuery ajax實現文件上傳,並隱藏 input 文件框

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>

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章