使用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。

 

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