月度归档：2020年11月

HTML/CSS switch开关（包括JS控制checked选择）

主要利用了label标签和input type=’checkbox’标签

switch1

预览：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
    display:none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
    </style>
</head>
<body>
    <h2>开关切换</h2>

<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <div class="slider"></div>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <div class="slider round"></div>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <div class="slider round"></div>
</label>
</body>

</html>

switch2

预览：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3 {
            margin: 10px 0 10px 0;
            font-size: 20px;
        }

        body {
            padding: 10px;
            font-size: 12px;
        }

        .example-con {
            margin-top: 30px;
        }

        .mui-switch-con {
            margin-top: 10px;
            font-size: 16px;
        }

        .mui-switch-con label {
            display: block
        }

        .mui-switch {
            width: 52px;
            height: 31px;
            position: relative;
            border: 1px solid #dfdfdf;
            background-color: #fdfdfd;
            box-shadow: #dfdfdf 0 0 0 0 inset;
            border-radius: 20px;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            background-clip: content-box;
            display: inline-block;
            -webkit-appearance: none;
            user-select: none;
            outline: none;
        }

        .mui-switch:before {
            content: '';
            width: 29px;
            height: 29px;
            position: absolute;
            top: 0px;
            left: 0;
            border-radius: 20px;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }

        .mui-switch:checked {
            border-color: #64bd63;
            box-shadow: #64bd63 0 0 0 16px inset;
            background-color: #64bd63;
        }

        .mui-switch:checked:before {
            left: 21px;
        }

        .mui-switch.mui-switch-animbg {
            transition: background-color ease 0.4s;
        }

        .mui-switch.mui-switch-animbg:before {
            transition: left 0.3s;
        }

        .mui-switch.mui-switch-animbg:checked {
            box-shadow: #dfdfdf 0 0 0 0 inset;
            background-color: #64bd63;
            transition: border-color 0.4s, background-color ease 0.4s;
        }

        .mui-switch.mui-switch-animbg:checked:before {
            transition: left 0.3s;
        }

        .mui-switch.mui-switch-anim {
            transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
        }

        .mui-switch.mui-switch-anim:before {
            transition: left 0.3s;
        }

        .mui-switch.mui-switch-anim:checked {
            box-shadow: #64bd63 0 0 0 16px inset;
            background-color: #64bd63;
            transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
        }

        .mui-switch.mui-switch-anim:checked:before {
            transition: left 0.3s;
        }
    </style>
</head>

<body>
    <div class="example-con">
        <h3>默认</h3>
    
        <div class="mui-tab-con clearfix">
            <form class="mui-form" name="" method="post" action="#" id="">
                <fieldset>
                    <legend>表单标题</legend>
                    <div class="mui-switch-con">
                        <label><input class="mui-switch" type="checkbox"> 默认未选中</label>
                    </div>
                    <div class="mui-switch-con">
                        <label><input class="mui-switch" type="checkbox" checked> 默认选中</label>
                    </div>
    
                </fieldset>
            </form>
        </div>
    <pre class="prettyprint lang-html linenums:1">
    <label><input class="mui-switch" type="checkbox"> 默认未选中</label>
    <label><input class="mui-switch" type="checkbox" checked> 默认选中</label>
    </pre>
    </div>
    <div class="example-con">
        <h3>简单的背景过渡效果 switch</h3>
           <p>加 mui-switch-animbg 类即可</p>
        <div class="mui-tab-con clearfix">
            <form class="mui-form" name="" method="post" action="#" id="">
                <fieldset>
                    <legend>表单标题</legend>
                    <div class="mui-switch-con">
                        <label><input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中</label>
                    </div>
                    <div class="mui-switch-con">
                        <label><input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label>
                    </div>
    
                </fieldset>
            </form>
        </div>
    <pre class="prettyprint lang-html linenums:1">
    <label><input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中</label>
    <label><input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label>
    </pre>
    </div>
    <div class="example-con">
        <h3>过渡效果的switch</h3>
           <p>加 mui-switch-anim 类即可</p>
        <div class="mui-tab-con clearfix">
            <form class="mui-form" name="" method="post" action="#" id="">
                <fieldset>
                    <legend>表单标题</legend>
                    <div class="mui-switch-con">
                        <label><input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中</label>
                    </div>
                    <div class="mui-switch-con">
                        <label><input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label>
                    </div>
    
                </fieldset>
            </form>
        </div>
    <pre class="prettyprint lang-html linenums:1">
    <label><input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中</label>
    <label><input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label>
    </pre>
    </div>
</body>

</html>

使用：

<input class="switch switch-animbg"   value="2"  style="outline: medium;margin-bottom: -10px;"  name="switch-alarm"   onclick="switchAlarm()" type="checkbox" >

JS控制代码： // 这里只能用prop去控制和判断不能用attr

function switchAlarm() {

        console.log($('.switch').attr('value'))  // 2 1 2 1 .....
        if($('.switch').attr('value') === '2'){
            $('.switch').prop('checked',false)
            //操作 .......

            //成功以后
            $('.switch').prop('checked',true)
            $('.switch').attr('value',1)
        }else {
            $('.switch').prop('checked',true)
            //操作 .......

            //成功以后
            $('.switch').prop('checked',false)
            $('.switch').attr('value',2)
        }
    }

原文：https://www.cnblogs.com/it-Ren/p/13062999.html

PHP 实现一种多文件上传的方法

发表评论

之前在实现表单中file类型input选择多图片的时候找到一种方式也许不是最好的但亲测可行且支持ie7以上以及chrome浏览器

在表单中使用正常多文件选择multiple属性

<input type="file" id="image" class="file image hidden" name="image[]" multiple="true">

然后使用AjaxFileUpload或其他方式提交

将对应命名的file文件 $file[‘image'] 转化为 json打印

{"name":"7332.png","type":"image\/png","tmp_name":"\/tmp\/phplqppvR","error":0,"size":659}

但是此时结果为

{"name":["7656.png","7718.png"],"type":["image/png","image/png"],"tmp_name":["/tmp/phpDzSovj","/tmp/phpP8kWmT"],"error":[0,0],"size":[357,662]}

所有的属性都变为数组按序排列

这时候可以使用以下代码实现图片保存

if (!isset($_FILES[$field])) {
  return new JsonResponse(array('errorCode'=>1, 'message'=>'请上传文件'));
}
//重新命名$_FILE 存储多个文件上传
$arrayFile = array();
foreach($_FILES[$field] as $key => $value){
  $i = 0;
  if(is_array($value)) {
    foreach ($value as $v) {
      $i++;
      //重命名后重新放入超全局变量_FILE 保证键名唯一 也可直接上传
      $name = $field . '_split_' . $i;
      $_FILES[$name][$key] = $v;
    }
  }
}
//是否上传多文件
if($i > 0){
  for($j = 1; $j <= $i; $j++){ array_push($arrayFile, $field . '_split_' . $j); } }else{ array_push($arrayFile, $field); } //遍历file多个文件 上传 foreach($arrayFile as $file){ if (isset($_FILES[$file]) && $_FILES[$file]['name']) { //自定义上传方法 具体内容略 $data = $this->uploadFile($file, $path, uniqid());
    if ( isset($data) && !empty($data) ) {
      if(!isset($data['errors'])){
        //将上传结果存储于$result中 多图片地址使用逗号拼接
        if(isset($result)){
          $result = array('errorCode'=>0, 'message'=>$result['message'] . ',' . reset($data));
        }else{
          $result = array('errorCode'=>0, 'message'=>reset($data));
        }
      }else{
        //以下为返回错误信息
        if(is_array(reset($data))){
          $message = reset($data)[0];
        }else{
          $message = reset($data);
        }           
        $result = array('errorCode' => 1, 'message' => $message);
      }
    } else {
      $result = array('errorCode'=>1, 'message'=>'上传失败');
      break;
    }
  } else {
    $result = array('errorCode'=>1, 'message'=>'请上传文件');
    break;
  }
}
//返回上传结果
return $result;

原文：https://www.jb51.net/article/124095.htm

北京人才引进落户政策办理条件申请实施办法

发表评论

北京市引进人才管理办法（试行）

第一条为进一步优化本市人才队伍结构，加强首都经济社会发展的人才保障，根据《关于率先行动改革优化营商环境实施方案》（京发〔2017〕20号）、《关于优化人才服务促进科技创新推动高精尖产业发展的若干措施》（京政发〔2017〕38号）及国家和本市引进人才相关政策精神，结合本市实际，制定本办法。

第二条围绕北京“四个中心”战略定位和城市总体规划布局，立足首都经济社会发展的多样化人才需求，坚持政治站位，坚持首善标准，以德为先，通过多种方式不拘一格地为本市行政区域内各类创新主体引进紧缺急需人才。

第三条建立优秀人才引进的“绿色通道”，符合以下条件之一的人员来京工作的，可快速办理引进手续：

（一）“千人计划”和“海聚工程”的中国籍入选专家；

（二）“万人计划”、“高创计划”、中关村“高聚工程”的入选人；

（三）国家最高科学技术奖获奖人，国家自然科学奖、国家技术发明奖、国家科学技术进步奖二等奖及以上奖项的主要获奖人，本市科学技术奖一等奖及以上奖项的主要获奖人。

第四条支持优秀创新创业团队引进人才：

（一）在京承担国家和本市科技重大专项、重大科技基础设施、重大项目和工程等任务或进行其他重要科技创新的优秀人才团队，其领衔人可办理人才引进；由2名国家或本市重大人才工程入选人推荐，优秀人才团队的成员可申请办理人才引进;

（二）近3年累计自主投入5000万元以上（含）或近3年累计获得7000万元以上（含）股权类现金融资的创新创业团队，自主投入资金或融资资金到位且运营效果良好的，其主要创始人和核心合伙人可办理人才引进；近3年累计自主投入1亿元以上（含）或近3年累计获得1.5亿元以上（含）股权类现金融资的创新创业团队，自主投入资金或融资资金到位且运营效果良好的，由2名主要创始人或核心合伙人推荐，其团队成员可申请办理人才引进;

（三）市属各区（含经济技术开发区）、集团总公司及其他相应单位实施的重点人才工程中创新创业成效突出的入选人，可申请办理人才引进。

第五条加大科技创新人才及科技创新服务人才引进力度，符合以下条件之一的人员可申请办理人才引进：

（一）“中国专利金奖”获奖专利的发明人、获得3项以上（含）发明专利的独立完成人、以第二作者及以上身份获得6项以上（含）发明专利的主要完成人，其专利在京落地转化并取得显著经济社会效益的；

（二）在本市行政区域内的高新技术企业、创新型总部企业、新型研发机构等科技创新主体中承担重要工作，近3年每年应税收入超过上一年度全市职工平均工资一定倍数的（企业注册在城六区和北京经济技术开发区的为8倍，注册在本市其他区域的为6倍）；

（三）在本市行政区域内的知识产权服务机构、金融机构、人力资源服务机构、律师事务所、会计师事务所、审计师事务所等科技创新服务主体中承担重要工作，近3年每年应税收入超过上一年度全市职工平均工资一定倍数的（机构注册在城六区和北京经济技术开发区的为20倍，注册在本市其他区域的为15倍）；

（四）本市青年英才创新实践基地入站人员，出站后被本设站单位聘用的。

第六条加大文化创意人才引进力度，符合以下条件之一的人员可申请办理人才引进：

（一）在京注册运营、近3年年均营业收入3亿元以上（含）且年均税后净利润2000万元以上（含）的文化创意企业，其任职满3年的法定代表人、总经理等高级管理人员；

（二）新闻出版、广播影视、文化艺术、文物保护等领域国家级奖项获奖人和国家级文化创意人才培养工程入选人；

（三）社会贡献较大的知名媒体人、自由撰稿人、艺术经纪人、文化传承人、展览策划人和文化科技融合人才，以及著名的作家、导演、编剧、演员和节目主持等人员。

第七条加大体育人才引进力度，符合以下条件之一的人员可申请办理人才引进：

（一）具有国际影响力的重大赛事策划人和组织人、著名运动员和教练员、国际级和国家A级裁判员、知名体育解说员和体育节目主持人；

（二）具有良好发展趋势和培养前途的优秀体育后备人才。

第八条加大国际交往中心建设的人才保障，符合以下条件之一的人员可以申请办理人才引进：

（一）在京注册的重要国际组织或国际组织分支机构聘用的核心人员；

（二）跨国公司地区总部及其研发机构、外国或港澳台地区来京投资设立的规模以上企业等聘用的高级管理人员和高级专业技术人员；

（三）本市急需的具有全球视野、掌握世界前沿技术、熟悉国际间商务、法律、金融、技术转移等规则的人才。

第九条加大金融人才引进力度，符合以下条件之一的人员可申请办理人才引进：

（一）基金管理人和所管理基金均在京设立并备案，实收资本1亿元以上、近3年实际投资本市高精尖产业5000万元以上的天使投资基金管理人，其任职满3年的法定代表人、总经理、合伙人、合伙人委派代表等高级管理人员；

（二）基金管理人和所管理基金均在京设立并备案，实收资本3亿元以上、近3年实际投资本市高精尖产业5亿元以上的创业投资基金管理人，其任职满3年的法定代表人、总经理、合伙人、合伙人委派代表等高级管理人员；

（三）在京设立的金融控股集团、持牌金融机构、金融基础设施平台、金融组织聘用的贡献突出的高级管理人员和核心业务骨干。

第十条加大教育、科学研究和医疗卫生健康等专业的人才引进力度，符合以下条件之一的人员可申请办理人才引进：

（一）具有国家“双一流”大学（或学科）或国家级重点实验室5年以上工作经历，且具有高级职称的高等教育人才和科研人才；

（二）具有省级或地市级优质中小学10年以上教学经验，且具有高级职称的教师；

（三）具有三级医院10年以上从医经验，且具有高级职称的医疗卫生健康专业人员；

（四）本市紧缺急需的其他具有相应水平的教育和医疗卫生健康人才，以及其他类型事业单位所需的专业人才。

第十一条加大高技能人才引进力度：

（一）世界技能大赛获奖人及其主教练、本市职业技能一类竞赛第一名获奖人及其它国家级以上相应技能竞赛第一名获奖人且贡献突出的，可办理人才引进；

（二）本市科技成果转化紧缺急需的高技能人才，可申请办理人才引进。

第十二条建立自由职业者引进通道。对本市科技创新或文化创新贡献突出且依法纳税的自由职业者，可申请办理人才引进。

第十三条拓展紧缺急需人才遴选引进范围。在本市行政区域内符合首都城市功能定位和产业发展方向的各类用人主体中稳定工作、贡献突出，且符合以下条件之一的人员，可申请办理人才引进：

（一）在国内外取得硕士及以上学位或具有高级专业技术职称的；

（二）经人才引进综合评价合格的；

（三）经本市行政区域内各区或局级单位按程序推荐的；

（四）经相应的人才认定委员会认定推荐的；

（五）其他特殊特艺人才或紧缺急需人才。

第十四条拟引进的人才应无刑事犯罪记录，提出引进时一般应在聘用单位工作满2年。引进时年龄原则上不超过45周岁，“三城一区”引进的可放宽至50周岁，个人能力、业绩和贡献特别突出的可进一步放宽年龄限制。引进人才的配偶和未成年子女可随调随迁。

第十五条加强引进人才落户保障。引进人才无产权房屋的，可在聘用单位的集体户落户；聘用单位无集体户的，可在单位存档的人才公共服务机构集体户落户。

第十六条优化引进人才办理程序。引进人才本人签署诚信声明，对所提供材料的真实性、有效性和合法性做出书面承诺后，由聘用单位向所在区（含经济技术开发区）或具有管辖权的局级单位提出申请，报市人力社保局审核。市人力社保局对拟引进人才相关材料进行审核，审核通过的办理引进落户手续。

第十七条明确引进人才工作职责。市人力社保局负责对全市引进人才工作进行监督检查；各区人力社保局（含开发区人劳局）、具有管辖权的局级单位人事部门等报送单位负责对引进人才发挥作用情况进行跟踪问效；聘用单位负责加强对引进人才的管理与服务，履行帮助办理引进手续、缴纳社会保险等责任和义务；申请人应如实提供引进材料，并遵守法律法规和聘用单位规章制度。

第十八条加大廉政风险防范和违法违规行为处罚力度。加强制度建设，规范工作流程，明确相关主体职责，防范廉政风险。人才引进过程中存在弄虚作假、行贿受贿、推诿拖延等行为的，依法依规处理。其中，主管部门和聘用单位给予全市通报、压减办理数量、列入黑名单、暂停办理调京业务等处理；申请人取消调京资格、不良信息按照本市有关规定进行有效期为5年的记录，已取得本市常住户口的予以注销；相关人员违法违规线索移交司法机关处理。

第十九条本办法自发布之日施行，此前发布的《北京市引进人才和办理<北京市工作寄住证>的暂行办法》（京人发〔1999〕38号）同时废止。

原文：http://www.bjhkbl.com/rcyj/279.html

JS+php后台实现文件上传功能详解

发表评论

本文实例讲述了JS+php后台实现文件上传功能。分享给大家供大家参考，具体如下：

一、利用 FormData 对象形式上传

FormData 是 XMLHttpRequest 2 的产物，兼容 IE10+。

FormData 对象，可以把form中所有表单元素的name与value组成一个queryString，提交到后台。在使用Ajax提交时，使用FormData对象可以减少拼接queryString的工作量。

使用 FormData 对象

1.取得form对象，作为参数传入到FormData对象

html：

<form name="form1" id="form1">
   <input type="text" name="name" value="fdipzone">
   <input type="text" name="gender" value="male">
</form>

js：

var form = document.getElementById('form1');
var formdata = new FormData(form);

2.创建一个FormData空对象，然后使用append方法添加key/value

var formdata = new FormData();
formdata.append('name','fdipzone');
formdata.append('gender','male');

使用FormData提交表单及上传文件实例：

实例1

一般项目中使用的点击上传文件的按钮跟 <input type=”file”/> 默认样式是不一样的，我们得自定义。方法是，自己写一个<button> 按钮，然后再写一个 <input type=”file”/>（这个要隐藏，太难看），点击 <button> 的时候出发 <input type=”file”/> 的 click 事件。

HTML：

<input type="file"
    :style="{display: 'none'}"
    ref="input" @change="selectedFile"
/>
<button @click="upload">上传</button>

JS：

methods: {
  triggerSelect () {
   this.$refs.input.click()
  },
  selectedFile (e) {
   console.log(e.target.files[0])
   //根据项目需求做具体处理，比如说获取文件名
  },
  async upload () {
   //如果不需要用到上传后的返回值可以把 async...await 语法去掉
   let files = this.$refs.input.files;
   if(files.length > 0) {
    let form = new FormData();
    form.append('file', files[0])
    let data = await new Promise((resolve, reject) => {
      axios({
       url: '',
       method: 'post',
       data: form
      })
       .then(res => {
        resolve(res)
       })
       .catch(err => {
        reject(err)
       })
     })
   }
  }
}

实例2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title> FormData Demo </title>
 </head>
 <body>
  <form name="form1" id="form1">
    <p>name:<input type="text" name="name" ></p>
    <p>gender:<input type="radio" name="gender" value="1">male <input type="radio" name="gender" value="2">female</p>
    <p>photo:<input type="file" name="photo" id="photo"></p>
    <p><input type="button" name="b1" value="submit" onclick="fsubmit()"></p>
  </form>
  <div id="result"></div>
 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <script type="text/javascript">
  function fsubmit(){
    var data = new FormData($('#form1')[0]);
    $.ajax({
      url: 'server.php',
      type: 'POST',
      data: data,
      dataType: 'JSON',
      cache: false,
      processData: false, //不处理发送的数据，因为data值是FormData对象，不需要对数据做处理
      contentType: false  //不设置Content-type请求头
    }).done(function(ret){
      if(ret['isSuccess']){
        var result = '';
        result += 'name=' + ret['name'] + '<br>';
        result += 'gender=' + ret['gender'] + '<br>';
        result += '<img src="' + ret['photo'] + '" width="100">';
        $('#result').html(result);
      }else{
        alert('提交失敗');
      }
    });
    return false;
  }
 </script>
</body>
</html>

server.php

<?php
$name = isset($_POST['name'])? $_POST['name'] : '';
$gender = isset($_POST['gender'])? $_POST['gender'] : '';
$filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.'));
$response = array();
if(move_uploaded_file($_FILES['photo']['tmp_name'], $filename)){
  $response['isSuccess'] = true;
  $response['name'] = $name;
  $response['gender'] = $gender;
  $response['photo'] = $filename;
}else{
  $response['isSuccess'] = false;
}
echo json_encode($response);
?>

带显示图片的上传图片

// -------- 将以base64的图片url数据转换为Blob --------
function convertBase64UrlToBlob(urlData, filetype){
    //去掉url的头，并转换为byte
    var bytes = window.atob(urlData.split(',')[1]);
    //处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    var i;
    for (i = 0; i < bytes.length; i++) {
      ia[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab], {type : filetype});
}
$input.on('change', function (e) {
    var input = $input.get(0);
    var files = input.files || [];
    if (files.length === 0) {
      return;
    }
    console.log('选中 ' + files.length + ' 个文件');
    // 遍历选中的文件，预览、上传
    $.each(files, function (key, file) {
      var filename = file.name || '';
      var fileType = file.type || '';
      var reader = new FileReader();
      // onload事件
      reader.onload = function (e) {
        var base64 = e.target.result || this.result;
        var formData = new FormData();
        formData.append("upload_file", convertBase64UrlToBlob(base64, fileType), filename);
        var xhr = new XMLHttpRequest();
        // 开始上传
        xhr.open('POST', uploadImgUrl, true);
        // 发送数据
        xhr.send(formData);
      });
      reader.readAsDataURL(file);
    });
});

原文：https://www.jb51.net/article/157206.htm