上传本地图片并预览

上传后预览功能，不涉及后端

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 = '';
    }
  }
})