JQ--上传图片

最新推荐文章于 2023-07-14 10:43:35 发布

初来乍到到

最新推荐文章于 2023-07-14 10:43:35 发布

阅读量566

点赞数

分类专栏： jQ 开发中遇到的问题文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43868692/article/details/109669794

版权

jQ 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

开发中遇到的问题

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
  <title>上传充值截图</title>
  <link rel="stylesheet" href="../css/public.css">
  <style>
    .fileupload-box {
      padding: 5px;
      /* border: 2px dashed gainsboro; */
      height: 180px;
      width: 400px;
      position: relative
    }

    .fileupload-box p {
      margin: 5px 0 0 5px;

    }

    .img-box {
      position: absolute;
      width: 120px;
      height: 120px;
      left: 0;
      right: 0;
      top: 10px;
      bottom: 0;
      margin: auto;
    }

    .img-box img {
      width: 120px;
      height: 120px;
    }

    .btn {
      width: 90%;
      border: 0;
      border-radius: 5px;
      background-color: #FF8F3D;
      color: #FFFFFF;
      display: block;
      height: .9rem;
      margin: 0 auto;
      margin-top: .2rem;
    }
  </style>
</head>

<body>
  <header class="back">
    <img src="../image/iocn/btn_common_back.png" />
    <div>上传充值截图</div>
  </header>
  <main>
    <div class="fileupload-box">
      <div class="img-box">
        <input type="file" style="display:none" id="uploadfile" accept="image/*" />
        <img src="../image/more.jpg" id="image">
      </div>
    </div>
    <button class="btn">提交</button>
  </main>
  <script src="../js/jquery.min.js"></script>
  <script src="../js/setRem.js"></script>
  <script src="../js/toast.js"></script>
  <script>
    // 返回上一页
    $('.back').click(function () {
      window.history.go(-1);
    })
    
    $(function () {
      $("#image").click(function () {
        $("#uploadfile").click();
      })
      $("#uploadfile").change(function () {

        var files = $(this)[0].files[0];    //获取文件信息
        if (files) {
          console.log(files)
          var token = JSON.parse(localStorage.getItem('token'));
          var form = new FormData();
          form.append('token', token);
          form.append('file', files)
          $.ajax({
            type: "POST",
            url: "",
            dataType: "json",
            data: form,
            contentType: false,
            processData: false,
            success: function (data) {
              console.log(data)
              if (data.code == 1) {
                $("#image").attr('src', data.data.fullurl)  //将img标签的src绑定为DataURL
              }
            }
          })
        }
        else {
          alert("上传失败");
        }
      })
    })

  </script>
</body>

</html>

初来乍到到

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ--上传图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" co.
复制链接

扫一扫

专栏目录