上传图片模拟

<!-- 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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值