로컬 사진 업로드 및 미리 보기

업로드 후 미리보기 기능, 백엔드 제외
https://segmentfault.com/q/1010000005639819 http://codepen.io/Atinux/pen/qOvawK/

// 1：
$('#onload-btn').change(function () {
    var imgFile = this.files[0];
    var fr = new FileReader();
    fr.onload = function () {
        $('#QR').attr("src", fr.result);
    };
    fr.readAsDataURL(imgFile);
});

// 2：
$('#onload-btn').change(function () {
    var src = window.URL.createObjectURL(this.files[0])//   ：file.files[0]
    $('#QR').attr("src", src);
});

// 3：

  

    
Select an image
    
  
  

    ![](image)
    Remove image
  


new Vue({
  el: '#app',
  data: {
    image: ''
  },
  methods: {
    onFileChange(e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;
      this.createImage(files[0]);
    },
    createImage(file) {
      var image = new Image();
      var reader = new FileReader();
      var vm = this;

      reader.onload = (e) => {
        vm.image = e.target.result;
      };
      reader.readAsDataURL(file);
    },
    removeImage: function (e) {
      this.image = '';
    }
  }
})