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>  
  • 相关阅读:
    Top 10 Product Manager Skills To Boost Your Resume In 2021
    大数据知识梳理
    B端产品如何设计权限系统?
    华三盒式交换机MAC、ARP、Route性能表项参数查询
    中了传说中的挖矿病毒
    SqlServer 2019 事务日志传送
    docker中生成的pdf中文是方框的解决方案
    The Live Editor is unable to run in the current system configuration
    2021 面试题大纲
    五分钟搞定Docker安装ElasticSearch
  • 原文地址:https://www.cnblogs.com/g825482785/p/showimg.html
Copyright © 2011-2022 走看看