图片上传

图片简单版上传

css

 .myfile [type = "file"]{
          display: none;
     }

html

 <div class="myfile">
       <input type="file">
       <button id="btn">图片上传</button>
   </div>

js

 document.getElementById('btn').onclick = function(){
          this.previousElementSibling.click()
      }

图片上传预览

html

    <img id="imgview" width="100">
    <input type="file" id="upfile" accept = "image/gif, image/png" data-max-size="300">

js

//1.图片格式验证
//2.图片大小验证
document.getElementById('upfile').onchange = function( ){
        var accepts = this.getAttribute('accept').replace(/\s/g,'').split(',');
        var file = this.files[0];
        //文件类型
        if( accepts.indexOf( file.type ) == -1 ){
          alert('请上传图片文件！');
          this.value = '';
          return;
        }
        //文件大小
        var maxSize = this.dataset.maxSize;//单位为kb
        var size = file.size / 1024; //默认b
        if( size > maxSize ){
          alert('上传图片应小于'+maxSize+'KB！');
          this.value = '';
          return;
        }
        //可以预览图片
        var imgUrl = URL.createObjectURL( file );
        document.getElementById('imgview').src = imgUrl;
    }

图片上传预览更换点击事件

css

#input-file{
    display:none;
}

html

<img id='app-thumbnail' class='img-thumbnail'>
<button id='btn-selectImage' type='button' class='btn btn-default'>选择图片</button>
<input type="file" id='input-file' name="multipartFile" accept='image/*'>

js

//图片选中事件
    document.getElementById('input-file').onchange = function (event) {
        var reader = new FileReader();
        var img = document.getElementById('app-thumbnail');
        reader.onload = function (readerEvent) {
            img.src = readerEvent.target.result;
        }
        reader.readAsDataURL(event.target.files[0]);
    }
//注册选择图片按钮
    document.getElementById('btn-selectImage').onclick = function () {
        var fileSelector = document.getElementById('input-file');
        fileSelector.click();
    }