js实现本地图片上传选择后预览功能

二种方式,话不多说,直接上代码:

1.

        <input type="file" id="inp" name="uploadImg" accept="image/*">
        <img src="" id="img1">
        <script type="text/javascript" >
            var inp = document.getElementById("inp");
            inp.οnchange=function(){

                var file = this.files[0];   // 获取input上传的图片数据

                var src = window.URL.createObjectURL(file) ; 
                // 得到bolb对象路径，可当成普通的文件路径一样使用，赋值给src
                document.getElementById("img1").src = url;
            }

2.

<input type=file id="inp" name="uploadImg" accept="image/*">

<img src="" id="img1">

<script>

  var inp = document.getElementById("inp"); 

  inp.οnchange=function(){

           var read=new FileReader() // 创建FileReader对像;

           read.readAsDataURL(this.files[0])  // 调用readAsDataURL方法读取文件;

           read.οnlοad=function(){

                    var src=read.result ; // 拿到读取结果

                    document.getElementById("img1").src = src; 
            }

     }

</script>