jquery 实现上传图片到服务器

最新推荐文章于 2024-04-14 23:06:29 发布
码农遇见菜鸟
最新推荐文章于 2024-04-14 23:06:29 发布
阅读量387
点赞数
分类专栏：时间戳转换文章标签： jquery css javascript
本文链接：https://blog.csdn.net/weixin_40597855/article/details/129062457
版权
时间戳转换专栏收录该内容
2 篇文章 0 订阅
订阅专栏
jquery 实现上传图片到服务器
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <link rel="stylesheet" href="__CDN__/assets/css/bootstrap.css"/>
    <link rel="stylesheet" href="__CDN__/assets/libs/fastadmin-layer/dist/theme/default/layer.css">
    <!-- 引入轮播图css样式  -->
    <link rel="stylesheet" href="__CDN__/assets/libs/swiper/swiper.css">
    <script src="__CDN__/assets/libs/swiper/swiper.min.js"></script>
    <script type="text/javascript" src="__CDN__/assets/libs/jquery/dist/jquery.min.js?v=1566358456"></script>
    <script type="text/javascript" src="__CDN__/assets/js/respond.min.js"></script>
    <script type="text/javascript" src="https://guchi.haomachina.cn/assets/libs/fastadmin-layer/dist/layer.js?v=1600164693"></script>
    <title></title>
<style>
.row{
    margin: 0 !important;
}
.container {
    max-width:550px;
    padding: 0;
    background: #fff;
    font-size:15px;
}
*{  margin: 0; padding: 0;list-style:none;border:0; box-sizing:border-box;}
.timer{
    position: relative;
}
.timer img{
    width:100%;
    position: absolute;
    top: -37px;
    left:0;
}
.avtivecon{
    color: #fff;
    font-weight: bold;
    font-size:1.1em;
    position: absolute;
    top:1em;
    right:100px;
}
.timedata{
    position: absolute;
    top:2.5em;
    right: 77px;
    color: #fff;
    font-weight: bold;
    font-size:1.1em;
}
.advertise{
    border-top-left-radius:50px;
    border-top-right-radius:50px;
    position: relative;
    background:#F0F0F0;
}
.advi{
    background:#00AF66;
    width:80%;
    margin: 0 auto;
    border-radius:50px;
}
.notice-swiper {width:95%; height:50px;color: #fff;overflow: hidden;font-size:15px;margin: 0 auto;}
.notice-swiper .swiper-container2 { width: 100%; height:100%;}
.notice-swiper .swiper-slide {width: 100%;height:50px;display: flex; justify-content:space-around;line-height:50px;}
.notice-swiper .swiper-slide a { color:#333; font-size: 14px;}
.swiper-slide img{width:40px;height:40px;border-radius:50%;}
.money{
    display: flex;
    justify-content:flex-start;
}
.money .moneylist{
    text-align: center;
    border: 1px solid #ddd;
    padding:10px 8px;
    border-radius:8px;
    margin-right:10px;
}
.moneylist p{
    padding: 0;
    margin: 0;
}
.money .active{
    border: 1px solid #00AF66;
    color:#00AF66;
}
.moneylist .title{
    font-size:16px;
    font-weight: bold;
}
.moneylist .con{
    color:#999;
}
#post-form{
    padding:20px 20px 0 20px;
}
#post-form .input-group-addon {
    background: none;
}
.form-group{
    margin-bottom:10px;
    display: flex;
    justify-content:flex-start;
    align-items:center;
}
.control-label{
    width:25%;
    text-align-last: justify;
    text-align: justify;
    text-justify: inter-ideograph;
    padding-left: 0;
    font-size: 15px;
}
.inputbox{
    width:75%;
}
#post-form .panel-default {
    padding: 0;
}
input{
    outline:none;
    height:35px !important;
    border-radius:6px !important;
    outline: none;
    -webkit-appearance: none;
    -webkit-appearance: none;
}
.form-control{
    box-shadow: none;
    font-size:15px;
}
.modalshow{padding:40px 20px;}
.modaltitle{color: #00AF66;text-align: center;margin: 20px 0;font-size:16px;font-weight: bold;letter-spacing: 0.1em;text-indent: 0.1em;}
.back{position: absolute;top: 8px;left: 2px;width: 25px;}
.imglist{
    width:95%;
    margin:20px auto;
    display: flex;
    margin-bottom:30px;
    justify-content: space-around;
    align-items: center;
    background: #fff;
}

.imgbox{
    /*border: 1px solid #ddd;*/
    width:170px;
    height:110px;
    position: relative;
    border-radius:10px;
    margin-bottom:10px;
}
.photo{
    width:100%;
    height: 100%;
    /*height:40px;
    position: absolute;
    top:37%;
    left: 40%;*/
}
#zmz,#fmz{
    width:100%;
    height:100%;
    border-radius:10px;
}
.fotbot{
    display: flex;
    justify-content:space-between;
    align-items:center;
    padding-right:15px;
    margin-bottom:15px;
    margin-top:20px;
}
.footer{
    background: #2EB267;
    color: #fff;
    width:80%;
    height: 40px;
    font-weight: bold;
    line-height: 40px;
    font-size: 16px;
    border-radius: 50px;
    margin:0px auto;
    text-align: center;
    letter-spacing: 0.2em;
}
.customer{
    text-align: center;
}
.customer img{
    width:30px;
    height:30px;
    border-radius:50%;
    margin-bottom:3px;
}
.kefu_name{
    font-size:12px;
    color: #333;
    text-align: center;
}
.front{
    width:50%;
    text-align: center;
}
.process{text-align: center;margin-bottom:17px;background:#2EB267;height:250px;color: #fff;padding-top:20px;font-size:16px;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
}
.process img{
    width:85%;
    margin-top:20px;
}
.imgcontent{
    position: absolute;
    top:22%;
    width: 96%;
    left:2%;
    border-radius:10px;
    background: #fff;
}
.exam{
    width:80px;
}
.back{position: absolute;top: 10px;left: 6px;width: 25px !important;margin-top:0!important;}
</style>
</head>
<body>
<div class="container">
    <div class="advertise">
        <div class="process">
             <img src="99.png" class="back">
            <p>激活流程</p>
            <img src="c9.jpg">
        </div>
        <div class="imgcontent">
            <h2 style="margin:30px 20px;">上传申请人信息</h2>
            <div class="imglist">
                <input type="file" accept="image/*" onchange="getzImg(this)" style="display:none" value="" id="img_z"/>
                <div>正本：</div>
                
                <div onclick="zhengmian()" class="front">
                    <div class="imgbox">
                         <img src="2b.jpg" class="photo one"/>
                        <img src="" id="zmz" class="hidden">
                    </div>
                    <!-- <p>行驶证（印章页）</p> -->
                </div>
                <div>
                    <img src=065.png" class="exam">
                </div>
            </div>
            <div class="imglist" style="margin-bottom:10px;">
                <input type="file" accept="image/*" onchange="getfImg(this)" value="" id="img_f" style="display:none"/>
                <div>副本：</div>
                <div onclick="fanmian()" class="front">
                    <div class="imgbox">
                         <img src="ebc.jpg" class="photo two"/>
                        <img src="" id="fmz" class="hidden">
                    </div>
                    <!-- <p>行驶证（车辆照片页）</p> -->
                </div>
                <div>
                    <img src="f2.jpg" class="exam">
                </div>
            </div> 
           <!--  <div class="row">
                <div class="col-xs-12 col-md-9 col-md-offset-1">
                    <form id="post-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
                        <div class="form-group">
                            <div class="control-label">手机号：</div>
                            <div class="inputbox">
                                <input type="text" name="row[mobile]" id="c-mobile"  class="form-control" value="" maxlength="11" placeholder="请输入手机号">
                            </div>
                        </div>
                    </form>
                </div>
            </div> -->
            <div class="fotbot">
                <div class="footer" onclick="checkForm()">下一步</div>
                <div class="customer">
                    <img src="d42c1f4.png">
                    <div class="kefu_name">ETC客服</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var host=window.location.host;
    var baseUrl = 'https://'+host+'/';//请求 服务器
    var height=$(window).height();
    $(".advertise").css("height",height+'px');
    function getQueryString(name){
         var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
         var r = window.location.search.substr(1).match(reg);
         if(r!=null)return  unescape(r[2]); return null;
    }
    var link_id=getQueryString("id");
    $(function(){
        $('.img_wp img').height($('.img_wp img').width()*0.6);
        $(window).resize(function(){
            $('.img_wp img').height($('.img_wp img').width()*0.6);
        })
    })
    //正面
    function zhengmian(){
        $('#img_z').click();
    }
    function getzImg(imgFile){

        var file = imgFile.files[0];

        var reader = new FileReader();

        reader.readAsDataURL(file);//将文件读取为Data URL小文件   这里的小文件通常是指图像与 html 等格式的文件

        reader.onload = function(e){
            $("#zmz").removeClass("hidden");
            $("#zmz").attr("src",e.target.result);
            $(".one").addClass("hidden");
            var formData = new FormData();
            formData.append("file", file);
            formData.append("name","file" );
            upload(formData,'front');
        }
    }
    // 上传
    var frontimg;var afterimg;
    function upload(data,name){
         $.ajax({
            type:'post',
            data:data,
            contentType: false,
            processData: false,
            url:baseUrl+'addons/alioss/index/upload',
            success:function(ret){
                if(name=="front"){
                    frontimg=ret.data.url;
                }else{
                    afterimg=ret.data.url
                }
            }
        })
    }
    //反面
    function fanmian(){
        $('#img_f').click();
    }
    function getfImg(imgFile){

        var file = imgFile.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
            $("#fmz").removeClass("hidden");
            $(".two").addClass("hidden");
            $("#fmz").attr("src",e.target.result);
            var formData = new FormData();
            formData.append("file", file);
            formData.append("name","file" );
            upload(formData,'after');
        }
    }
    //申请
    function checkForm(){

        if($('#img_z').val()==null||$('#img_z').val()==''){

            layer.msg("请上传行驶证（印章页）")

            return false;

        }
        if($('#img_f').val()==null||$('#img_f').val()==''){

             layer.msg("请上传行驶证（车辆照片页面）")

            return false;

        }
    }
</script>