【JavaScript & jQuery】获取图片、文件地址的几种方法

秒速五厘米 2022-01-12 11:15 600阅读 0赞

备忘， 整理一下：  
![在这里插入图片描述][20190428142233854.png]

chrome、IE、火狐测试过有效；

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <label>
        <input id="in1" type="file" accept="image/jpg,image/jpeg,image/png,image/bmp">
    </label>
    
    <div class="preview_wrap"></div>
    
    
    <img src="" alt=""  id="img1">
    
    
    <script src="../jQuery-3.3.1.min.js"></script>
    <script>
    
        //1、 createObjectURL
        $("input").change(function(){
    
            var fileS = this.files;
    
            if(!fileS.length) {
                return;
            }
    
            $("img").attr("src", window.URL.createObjectURL(fileS[0]));
    
        });
    
        //2、 上面的 js 原生版
        // document.getElementById('in1').onchange=function () {
        //     // console.log(this.files[0]);
        //     var fileS=this.files;
        //     if(!fileS.length) {
        //         return;
        //     }
        //
        //     document.getElementById('img1').setAttribute("src",window.URL.createObjectURL(fileS[0]));
        //
        // }
    
    
        //3、   URL.createObjectURL 方式
        // document.getElementById('in1').onchange = function(){
        //     var ele =  this.files[0];
        //
        //     var createObjectURL = function(blob){
        //         return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
        //     };
        //     var newimgdata = createObjectURL(ele);
        //
        //     console.log(newimgdata);
        //
        //     var pvImg = new Image();
        //     pvImg.src = newimgdata;
        //     pvImg.setAttribute('id','previewImg');
        //
        //     $('.preview_wrap').html('').append(pvImg);
        // }
    
    
    
        //4、  filereader方式
        // document.getElementById('in1').onchange = function(){
        //
        //     var ele =  this.files[0];
        //
        //     var fr = new FileReader();
        //     fr.onload = function(ele){
        //
        //         var pvImg = new Image();
        //         pvImg.src = ele.target.result;
        //         pvImg.setAttribute('id','previewImg');
        //
        //         $('.preview_wrap').html('').append(pvImg);
        //     }
        //     fr.readAsDataURL(ele);
        // }
    
    
    
    </script>
    </body>
    </html>

[20190428142233854.png]: /images/20220109/4978056cf5fe4c44b2c7808ab1c2bbcd.png