上传本地图片并预览

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

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：
<div id="app">
  <div v-if="!image">
    <h2>Select an image</h2>
    <input type="file" @change="onFileChange">
  </div>
  <div v-else>
    ![](image)
    <button @click="removeImage">Remove image</button>
  </div>
</div>

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