上传图片显示

来源：互联网发布：淘宝网购物车已买到的宝贝编辑：程序博客网时间：2024/06/05 01:18
<!DOCTYPE html><html><head><title></title><style>*{margin: 0;padding: 0;}                .lm_manage .finance{padding: 20px;}                .lm_manage .t{text-indent: 2em;margin-bottom: 20px;}                .lm_manage .t.pass,.lm_manage .t.no_pass{text-indent: 0;text-align: center;margin-top: 20px;}                .lm_manage .t.passing{text-indent: 0;text-align: center;}                .lm_manage .t.pass:before{content: '\2713';color: green;margin-right: 5px;border: solid 1px green;border-radius: 50%;width: 18px;height: 18px;display: inline-block;text-align: center;line-height: 18px;}                .lm_manage .t.no_pass:before{content: '\2715';color: red;margin-right: 5px;border: solid 1px red;border-radius: 50%;width: 18px;height: 18px;display: inline-block;text-align: center;line-height: 18px;}                .lm_manage .radio_select{overflow: hidden;margin-top: 15px;}                .lm_manage .radio_select dd{float: left;width: 350px;text-indent: 2em;}                .lm_manage .radio_select dt{float: left;}                .lm_manage .radio_select dt input{margin-left: 20px;margin-right: 5px;position: relative;top: -1px;}                .lm_manage .btn{margin: 0 auto;display: block;margin-top: 40px;}                .lm_manage .id_card{display: inline-block;margin: 0 10px;margin-top: 20px;width: 220px;height: 135px;border: dashed 1px #D5D5D5;border-radius: 3px;overflow: hidden;cursor: pointer;text-align: center;position: relative;margin-bottom: 40px;}                .lm_manage .id_card dd{color: #aa5800;}                .lm_manage .id_card:hover dd{text-decoration: underline;}                .lm_manage .id_card dt{width: 110px;height: 67px;margin: 10px auto;margin-top: 20px;opacity: .6;}                .lm_manage .id_card .img{position: absolute;width: 200px;left: 10px;top: 10px;height: 115px;background: #fff;display: none;}                .lm_manage .id_card .img img{max-width: 100%;max-height: 100%;}                .upload_original .close{width: 21px;height: 21px;background: rgba(0,0,0,0.5);border-radius: 50%;position: absolute;right: 0px;top: 0px;z-index: 2;text-align: center;line-height: 20px;cursor: pointer;letter-spacing: 0;color: #fff;}            </style>            <script type="text/javascript" src="jquery.1.12.4.min.js"></script></head><body><div class="assets_content w753 right mv-bg-white">            <h1>照片认证</h1>            <p id="errorMsg" style="text-align: center;padding-top: 20px;font-size: 16px;display: none" class="red"></p>            <div class="pay_manage lm_manage" id="photoauth" style="">                <div class="finance" style="margin-top:0;text-align: center;">                    <form id="photoidverify-form" method="post" action="/ajax/user/photoidverify/" enctype="multipart/form-data">                        <div class="file_box">                            <input type="file" class="file" name="photo[]" style="display: none;">                            <input type="file" class="file" name="photo[]" style="display: none;">                            <input type="file" class="file" name="photo[]" style="display: none;">                        </div>                        <div class="file_click">                            <dl class="id_card upload_original upload_original_on">                                <dt style="background: url(/jubi/images/id_card_z.png) no-repeat center center / 80px auto;"></dt>                                <dd>上传正面</dd>                                <dd class="img"><img></dd>                            </dl>                            <dl class="id_card upload_original">                                <dt style="background: url(/jubi/images/id_card_f.png) no-repeat center center / 80px auto;"></dt>                                <dd>上传背面</dd>                                <dd class="img"><img></dd>                            </dl>                            <dl class="id_card upload_original">                                <dt style="background: url(/jubi/images/id_card_s.png) no-repeat center center / auto 50px;"></dt>                                <dd>上传手持身份证和当日字条</dd>                                <dd class="img"><img></dd>                            </dl>                        </div>                        <div class="pwtrade" style="padding-top: 50px;">                            <dl>                                <dd><input type="submit" value="确认提交" style="    font-size: 14px;width: 220px;height: 34px;background: #e55600;color: #fff;border: none;cursor: pointer;border-radius: 3px;margin-right: 20px;"></dd>                            </dl>                        </div>                    </form>                    <script>                        function upload(obj,num){                            var file = obj.files[0];                            var photoExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名                            if(photoExt!='.jpg'&& photoExt!='.png'&& photoExt!='.jpeg'){                                alert("请上传后缀名为jpg jpeg png的照片!");                                sign=null;                                return;                            }                            var fileSize = 0;                            var isIE = /msie/i.test(navigator.userAgent) && !window.opera;                            if (isIE && !obj.files) {                                var filePath = obj.value;                                var fileSystem = new ActiveXObject("Scripting.FileSystemObject");                                var file = fileSystem.GetFile (filePath);                                fileSize = file.Size;                            }else {                                fileSize = obj.files[0].size;                            }                            fileSize=Math.round(fileSize/2048*100)/100; //单位为KB                            if(fileSize<2048){                                sign=1                            }else{                                alert("照片最大尺寸为2M，请重新上传!");                                sign=null;                                return;                            }                            if(num == 3){                                return false;                            }                            var reader = new FileReader();                            reader.readAsDataURL(file);                            reader.onload = function (e) {                                $('.upload_original_on .close').detach();                                if(num == 1){                                    $('.upload_original_on').before('<div class="upload_original"><p class="close">×</p><img src="'+this.result+'"/></div>');                                }else{                                    $('.upload_original_on img').attr('src',this.result).before('<p self="1" class="close">×</p>');                                    $('.upload_original_on .img').show();                                }                            }                        }                        var lm = {                            //上传图片,不裁切                            upload_original:function () {                                $(document).on('click','.upload_original .close',function (e) {                                    e.stopPropagation();                                    var _index2 = $(this).parents('.id_card').index();                                    $('.file_box input').eq(_index2).val('');                                    $(this).parents('.id_card').find('.img').hide();                                })                                var num = 0;                                var input = $(".file");                                var original =$(".upload_original");                                if (typeof (FileReader) === 'undefined') {                                    result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";                                    input.attr('disabled', 'disabled');                                } else {                                    $(document).on('change','.file',function () {                                        upload(this,num);                                    })                                    $(document).on('click','.upload_original',function () {                                        var _index = $(this).index();                                        if($(this).attr('before') == 1){                                            num = 1;                                        }else{                                            num = 0;                                        }                                        $('.upload_original').removeClass('upload_original_on');                                        $(this).addClass('upload_original_on');                                        $('.file_box input').eq(_index).click();                                    })                                }                            }                        }                    </script>                    <script>                        $(function () {                            //图片/原图                            lm.upload_original();                        })                    </script>                </div>            </div>        </div></body></html>
阅读全文
0 0