zoukankan      html  css  js  c++  java
  • 图片预览上传

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>图片预览上传</title>
    <style type="text/css">
    img {
    200px;
    height: 200px;
    }
    #uploadFile {
    display: block;
    200px;
    height: 200px;
    }
    .policeMan_img{
    200px;
    height: 200px;
    border: 1px solid blueviolet;
    }
    .imgtis{
    display: none;
    color: red;

    }
    </style>
    </head>

    <body>

    <div id="">
    <div class="policeMan_img">
    <img class="uploadImg" style="display:none" />
    </div>
    <div class="imgtis">所选取图片的格式不对!</div>
    <input id="file_upload" type="file" name="file_upload" class="" onchange="showPic()" >
    </div>

    <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
    function showPic() {
    var pic = $("#file_upload").get(0).files[0];
    // console.log(pic)
    if(typeof(pic)!=undefined && typeof(pic)!="undefined" ){
    $(".uploadImg").prop("src", window.URL.createObjectURL(pic));
    $(".uploadImg").css("display", "block");
    var imgPath = $("#file_upload").val();
    // console.log(imgPath)
    if(imgPath != "") {
    var str = imgPath.substr(imgPath.lastIndexOf('.') + 1);
    if(str != 'jpg' && str != 'png' && str != 'JPG' && str != 'PNG') {
    //alert("选取的图片格式不对");
    $(".imgtis").css("display", "block");
    } else {
    $(".imgtis").css("display", "none");
    }
    }
    }else{
    // $(".uploadImg").css("display", "none");
    $(".uploadImg").removeProp("src")
    }

    }
    </script>

    </body>

    </html>

  • 相关阅读:
    ORACLE 使用笔记
    Python资源大全,让你相见恨晚的Python库
    基于python的k-s值计算
    sklearn聚类模型:基于密度的DBSCAN;基于混合高斯模型的GMM
    skearn学习路径
    透彻形象理解核函数
    LDA降维与PCA降维对比
    sklearn 岭回归
    GBDT、XGBOOST、LightGBM对比学习及调参
    sklearn,交叉验证中的分层抽样
  • 原文地址:https://www.cnblogs.com/lihong-123/p/7543485.html
Copyright © 2011-2022 走看看