html5 - javascript图片上传预览

问题描述

问 题

在用VUX需要用到上传头像但好像没有这个功能，在外面搜了一圈都没找到合适的，干脆用原生写一个图片上传并预览，图片是能上传的，但是预览出现问题，上代码

    <script type="text/javascript">

    var $file = document.getElementById('file')
 
    var img = document.getElementById('file-img')

    function readFile(){
        var file = this.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
            img.attr('src', this.result)
                    
    }
}
   $file.onchange(readFile)
</script>

解决方案

为什么用原生js又要掺杂jq写法？

    var $file = document.getElementById('file')
    console.log($file)

    var img = document.getElementById('file-img')
    console.log(img)

    function readFile(){
        var file = this.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
            img.src= this.result;
                    
    }
}
   $file.onchange=readFile;

另外 URL.createObjectURL也可以获得预览路径

    var $file = document.getElementById('file');
    console.log($file)

    var img = document.getElementById('file-img');
    console.log(img)

    function readFile(){
        var file = this.files[0];
     var imgsrc = URL.createObjectURL(file);
     img.src = imgsrc;
}
   $file.onchange=readFile;

这篇关于html5 - javascript图片上传预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！