zoukankan      html  css  js  c++  java
  • 上传头像功能

    利用input标签--file属性

    <img src="images/trainlogo.png" alt="" class="trainlogo" id="touxiang">

    <input type="file" name="" value="" class="trainlogo_sel" accept="image/*" multiple>

    将input定位在图片标签上,透明度为0

    input--file可以调用本地相机、摄像机、录音功能,

    <input type="file" accept="image/*" capture="camera">

    <input type="file" accept="video/*" capture="camcorder">

    <input type="file" accept="audio/*" capture="microphone">

    其中还有一个属性,multiple,支持多选,其优先级最高,如果写了multiple,那么camera什么的就没用了噢

    获取选择到的图片代码如下:

    //上传头像
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
          $('#touxiang').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
      }
    }
    $(".trainlogo_sel").change(function(){
      readURL(this);
    });

    //2017.05.11补充

    可以不写accept和capture属性,手机上没差

     

  • 相关阅读:
    [CERC2015]Digit Division
    [SDOI2012]拯救小云公主
    [不知道出自什么OJ]最大利润
    [USACO08FEB]修路Making the Grade
    P1985 [USACO07OPEN]翻转棋
    P1156 垃圾陷阱
    奶酪
    扫描线
    php数组
    php switch
  • 原文地址:https://www.cnblogs.com/ZLHF/p/6767153.html
Copyright © 2011-2022 走看看