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>  
  • 相关阅读:
    小波变换教程(十五)
    小波变换教程(十四)
    小波变换教程(十三)
    小波变换教程(十二)
    小波变换教程(十一)
    【转】小波变换教程(十)
    利用Python进行数据分析学习记录(一)
    【转】小波变换教程(九)
    小波变换教程(八)
    【转】小波变换教程(七)
  • 原文地址:https://www.cnblogs.com/g825482785/p/showimg.html
Copyright © 2011-2022 走看看