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>  
原文地址:https://www.cnblogs.com/g825482785/p/showimg.html