jquery上传头像

北里新妆

于 2020-08-11 15:22:11 发布

阅读量773

点赞数 1

分类专栏： js 笔记文章标签： js

本文链接：https://blog.csdn.net/G_ruirui/article/details/107936336

版权

笔记同时被 2 个专栏收录

26 篇文章 2 订阅

订阅专栏

19 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery上传头像</title>
<script src="js/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<img id="pic" style="width:100px;height:100px;border-radius:50%;" src="http://www.jq22.com/tx/28.png">
<input id="upload" name="file" accept="image/*" type="file" style="display: none">
<!-- <ul>
        <li style="width:23%;float:left;margin:10px;height:200px;background:#eee;"><img style="height:200px;width:100%;" src="/upload/thumbs/efb3fb08b062a55e28a0e15ad2228514.jpg" alt=""></li>
 </ul> -->

<script>
  $(function() {
      $("#pic").click(function() {
          $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
          $("#upload").on("change", function() {
              var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
              console.log(this.files)
              if (objUrl) {
                  $("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片
                  upimg();
              }
          });
      });
  });

  //建立一?可存取到?file的url
  function getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) { // basic
          url = window.createObjectURL(file);
      } else if (window.URL != undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file);
      }
      return url;
  }
  //上传头像到服务器
  function upimg() {
      console.log(344)
      var pic = $('#upload')[0].files[0];
      console.log(pic)
      var file = new FormData();
      file.append('image', pic);
      file['image']=pic
      console.log(file)
      // $.ajax({
      //     url: "/uploadImg",
      //     type: "post",
      //     data: file,
      //     cache: false,
      //     contentType: false,
      //     processData: false,
      //     success: function(data) {
      //         console.log(data);
      //         var res = data;
      //         $("#resimg").append("<img src='/" + res + "'>")
      //     }
      // });
  }
</script>

</body>
</html>