zoukankan      html  css  js  c++  java
  • vue-上传文件

    <label for="exampleInputFile">头像</label>
    <img :src=" imgsrc != '' ? imgsrc :'../img/timgs.png'" class="iconfont icon-tupian" onclick="strike()" id="headPortraitImgShow" alt="" width="50px" height="50px" />
    <input type="file" id="headPortraitUpload" style="margin-top:10px;display: none">

    HTML代码

    $(function () {
      $("#headPortraitUpload").on("change",headPortraitListener); /*定义全局变量存贮图片信息*/    var base64head=""; /*头像上传监听*/       function headPortraitListener(e) { var img = document.getElementById('headPortraitImgShow'); if(window.FileReader) { var file = e.target.files[0]; var reader = new FileReader(); if (file && file.type.match('image.*')) { reader.readAsDataURL(file); } else { img.css('display', 'none'); img.attr('src', ''); } reader.onloadend = function (e) { img.setAttribute('src', reader.result); base64head = reader.result; } } }
    }

    function strike() {
      document.getElementById("headPortraitUpload").click();
    }

     

    Jquery将图片给img

    var formFile = new FormData();
                var sum = document.getElementById("headPortraitUpload").files.length;
                for (var i = 0;i < sum;i++){
                    formFile.append("file", document.getElementById("headPortraitUpload").files[i]); //加入文件对象
                }
                if(id){
                    formFile.append("id",id);
                }
                formFile.append("account",this.account);
                formFile.append("password",this.password);
                formFile.append("confirmPassword",this.passwords);
                formFile.append("name",this.name);
                formFile.append("mobile",this.phone);
                formFile.append("companyId.id",this.firmdown);
                formFile.append("roles",this.rolelist);
                var header={
                    'token':CDK.token,
                    'Content-Type': 'multipart/form-data'
                };

    axios请求时,注意加上请求头,以FormData转换

  • 相关阅读:
    leetcode78 Subsets
    leetcode76 Minimum Window Substring
    leetcode73 Set Matrix Zeroes
    leetcode70 Climbing Stairs
    leetcode50 Pow(x, n)
    leetcode49 Group Anagrams
    leetcode48 Rotate Image
    正则表达式及字符处理
    RPM软件包管理.作业
    yum管理RPM包.作业
  • 原文地址:https://www.cnblogs.com/weilizou/p/10861216.html
Copyright © 2011-2022 走看看