zoukankan      html  css  js  c++  java
  • 使用input做简单的上传图片

    css 代码:

    .container{
          width: 200px;
          height: 200px;
          border: 1px solid #666;
        }

    HTML 代码:

    <input type="file" id="photo">
    <div class="container"></div>

    JavaScript 代码:

    document.getElementById("photo").addEventListener("change",function(e){
          var files =this.files;
          var img = new Image();
          var reader =new FileReader();
          reader.readAsDataURL(files[0]);
          reader.onload =function(e){
            var dx =(e.total/1024)/1024;
            if(dx>=2){
              alert("文件大小大于2M");
              return;
            }
            img.src =this.result;
            img.style.width ="100%";
            img.style.height ="90%";
            document.querySelector('.container').appendChild(img);
          }
        })

    FileReader 是html5提供读取文件的api,作用是把文本流按指定格式读取到缓存。

    FileReader 有四种读取文件的方式:

      readAsBinaryString、readAsDataURL、readAsText、readAsArrayBuffer;

    基于预览上传后图片的需求,需要将图片读取为DataURL。

    点击这里:自定义样式上传图片

    The most terrible person in the world is yourself
  • 相关阅读:
    django ajax使用
    vim--分屏快捷键
    django csrf
    django mysql使用
    官方文档地址
    图解http 学习
    Terms
    Data Center Group
    Misc
    FTDI CDM Drivers 2.06.00
  • 原文地址:https://www.cnblogs.com/wyhlightstar/p/6497397.html
Copyright © 2011-2022 走看看