zoukankan      html  css  js  c++  java
  • jquery实时显示上传的图片

      下面是js代码。

    <script type="text/javascript">
        $('input[name="IDpositivePath"]').on('change',function() {
            
            if(typeof this.files == 'undefined'){
                return;
            }
            var img         = this.files[0];//获取图片信息
            var type         = img.type;//获取图片类型,判断使用
            var url         = getObjectURL(this.files[0]);//使用自定义函数,获取图片本地url
            var fd             = new FormData();//实例化表单,提交数据使用
            fd.append('img',img);//将img追加进去
            if(url)
                $('#IDpositivePath').attr('src',url).show();//展示图片
            if(type.substr(0,5) != 'image'){//无效的类型过滤
                alert('非图片类型,无法上传!');
                return;
            }
        });
        
        $('input[name="IDoppositePath"]').on('change',function() {
            
            if(typeof this.files == 'undefined'){
                return;
            }
            var img         = this.files[0];//获取图片信息
            var type         = img.type;//获取图片类型,判断使用
            var url         = getObjectURL(this.files[0]);//使用自定义函数,获取图片本地url
            var fd             = new FormData();//实例化表单,提交数据使用
            fd.append('img',img);//将img追加进去
            if(url)
                $('#IDoppositePath').attr('src',url).show();//展示图片
            if(type.substr(0,5) != 'image'){//无效的类型过滤
                alert('非图片类型,无法上传!');
                return;
            }
        });
        
        $('input[name="otherIDPath"]').on('change',function() {
            
            if(typeof this.files == 'undefined'){
                return;
            }
            var img         = this.files[0];//获取图片信息
            var type         = img.type;//获取图片类型,判断使用
            var url         = getObjectURL(this.files[0]);//使用自定义函数,获取图片本地url
            var fd             = new FormData();//实例化表单,提交数据使用
            fd.append('img',img);//将img追加进去
            if(url)
                $('#otherIDPath').attr('src',url).show();//展示图片
            if(type.substr(0,5) != 'image'){//无效的类型过滤
                alert('非图片类型,无法上传!');
                return;
            }
        });
        
        $('input[name="realpayPath"]').on('change',function() {
            
            if(typeof this.files == 'undefined'){
                return;
            }
            var img         = this.files[0];//获取图片信息
            var type         = img.type;//获取图片类型,判断使用
            var url         = getObjectURL(this.files[0]);//使用自定义函数,获取图片本地url
            var fd             = new FormData();//实例化表单,提交数据使用
            fd.append('img',img);//将img追加进去
            if(url)
                $('#realpayPath').attr('src',url).show();//展示图片
            if(type.substr(0,5) != 'image'){//无效的类型过滤
                alert('非图片类型,无法上传!');
                return;
            }
        });
        
        $('input[name="sellerPath"]').on('change',function() {
            
            if(typeof this.files == 'undefined'){
                return;
            }
            var img         = this.files[0];//获取图片信息
            var type         = img.type;//获取图片类型,判断使用
            var url         = getObjectURL(this.files[0]);//使用自定义函数,获取图片本地url
            var fd             = new FormData();//实例化表单,提交数据使用
            fd.append('img',img);//将img追加进去
            if(url)
                $('#sellerPath').attr('src',url).show();//展示图片
            if(type.substr(0,5) != 'image'){//无效的类型过滤
                alert('非图片类型,无法上传!');
                return;
            }
        });
    
        //自定义获取图片路径函数
        function getObjectURL(file) {
            var url = null ;
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        }
    </script>          

    html代码

    <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label"><span class="xx">*</span>商品封面图:</label>
                    <div class="col-sm-5 clearfix">
                            <img src="<?php echo $this->config->item('base_url').'/public/admin/'?>img/noimg_160.gif" width="260" height="180" class="img" id="IDpositivePath" alt="">
                            <input type="file" class="form-control" id="IDpositivePath" name="IDpositivePath" placeholder="">
                            <br>
                            <span>严格保密,只限于内部审核,请上传清晰照片,大小可大于800Kb</span>
                    </div>
             </div>  
  • 相关阅读:
    【NOIP 2003】 加分二叉树
    【POJ 1655】 Balancing Act
    【HDU 3613】Best Reward
    【POJ 3461】 Oulipo
    【POJ 2752】 Seek the Name, Seek the Fame
    【POJ 1961】 Period
    【POJ 2406】 Power Strings
    BZOJ3028 食物(生成函数)
    BZOJ5372 PKUSC2018神仙的游戏(NTT)
    BZOJ4836 二元运算(分治FFT)
  • 原文地址:https://www.cnblogs.com/g825482785/p/showimg.html
Copyright © 2011-2022 走看看