上传后预览功能，不涉及后端
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>
<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 = '';
}
}
})
