上传图片模拟

来源:互联网 发布:阿里云智慧农业平台 编辑:程序博客网 时间:2024/06/06 08:23
<!-- html代码: -->
        <input type="file" id="file01" class="test" accept="image/*">    <!--accept="image/*只接受图片的格式上传--> 
        <div class="img_center">       
            <img src="" class="img1-img" id="img01">     
        </div>
        <input type="file" id="file02" class="test">     
        <div class="img_center">       
            <img src="" class="img1-img" id="img02">     
        </div> 
        <input type="file" id="file03" class="test">     
        <div class="img_center">       
            <img src="" class="img1-img" id="img03">     
        </div> 
        <!-- js代码: -->
        <script type="text/javascript">
            //获取图片路劲的方法,兼容多种浏览器,通过createObjectURL实现 
            function getObjectURL(file){   
                var url = null;   
                if(window.createObjectURL != undefined){
                     url = window.createObjectURL(file);//basic   
                 }else if(window.URL != undefined){     
                    url = window.URL.createObjectURL(file);   
                }else if(window.webkitURL != undefined){     
                    url = window.webkitURL.createObjectURL(file);   
                }     
                return url; 
            }   
            //实现功能代码 
            $(function(){   
                /*$("#browerfile").change(function(){     
                    var path = $(this).val();     
                    var objUrl = getObjectURL(this.files[0]);     
                    if(objUrl){       
                        $('.img1-img').attr("src",objUrl);     
                    }   
                });*/
                //公用函数
                function uploadPic(fileId,imgId){
                    $("#" + fileId).change(function(){     
                        var path = $(this).val();   
                        console.log(path);  
                        var objUrl = getObjectURL(this.files[0]);     
                        if(objUrl){       
                            console.log(objUrl);  
                            $("#" + imgId).attr("src",objUrl);     
                        }   
                    });
                };
                uploadPic("file01","img01");
                uploadPic("file02","img02");
                uploadPic("file03","img03");
            }) 


        </script>
原创粉丝点击