zoukankan      html  css  js  c++  java
  • JS实现图片的选择并预览,并且能删除

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>评价</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/evaluate.css">
    <script src="js/flexible.debug.js"></script>
    <script src="js/flexible_css.debug.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/exif.js"></script>
    </head>
    <body>
    <div class="app">
    <div class="tit">
    <div class="titL fl">
    <img src="img/img3.jpg">
    </div>
    <div class="titR fl">
    <p>
    湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣
    湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣
    </p>
    </div>
    </div>
    <div class="ping">
    <p class="p_tit">请填写您的评价内容</p>
    <div class="ly ly2">
    <textarea name="" id="textareaVal" cols="" rows="" placeholder="分享您的使用心得" maxlength="120"></textarea>
    <span><em class="text_num">0</em>/120</span>
    </div>
    <div class="img_group">
    <p class="img_tit">上传图片</p>
    <div class="img_list del-wrapper">
    <!--<div class="img_item">
    <img src="img/img3.jpg">
    <i class="del"></i>
    </div>-->

    <div class="img_item openImg">
    <img src="img/add_photos.png">
    </div>
    </div>

    </div>
    <div class="btn_div">
    <button class="btn">提交评价</button>
    </div>

    </div>
    <div class="mo" style="display: none;"></div>
    <div class="fot" style="display: none;">
    <div class="fot_item">
    <button class="a">拍摄</button>
    <input type="file" accept="image/*" capture="camera" id="image" onchange="showPicture(this,'image');"><!--针对手机上的摄像头进行调用,在PC使用会非常慢-->
    <!--<input type="file" id="image" onchange="showPicture(this,'image');">-->
    </div>
    <div class="fot_item">
    <button class="b">从相册选择</button>
    <input type="file" id="image2" onchange="showPicture(this,'image2');">
    </div>
    <div class="fot_item">
    <button class="c">取消</button>
    </div>
    </div>
    <div class="success" style="display: none;">评价成功</div>
    </div>
    <script>
    $(function(){
    //选择图片并预览
    var num=0;
    var imgArr=[];
    function showPicture(imgFile,obj){
    var _img=document.getElementById(obj);
    var img_area=document.getElementById("img_area");
    //获得图片的大小 MB
    var f = _img.files;
    var imgSize=f[0].size/1024/1024;
    var m=Math.floor(imgSize* 100) / 100;
    if(m<=5){
    imgType();
    }
    else{
    alert('图片大小不能超过5MB');
    }
    //获得图片的类型
    function imgType(){
    var filePath =_img.value;
    var type = filePath.substring(filePath.lastIndexOf(".")+1).toLowerCase();
    switch (type){
    case "jpg":
    base();
    break;
    case "jpeg":
    base();
    break;
    case "gif":
    base();
    break;
    case "png":
    base();
    break;
    default:
    alert('请传入正确的的图片格式!');
    break;
    }
    }
    //图片的base64
    function base(){
    var _img64_=imgFile.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(_img64_);
    reader.onload = function(e){
    var orientation = null;
    //获取照片方向角属性,用户旋转控制
    EXIF.getData(imgFile,function () {
    EXIF.getAllTags(this);
    orientation = EXIF.getTag(this, 'Orientation');
    console.log("Orientation:" + orientation); // 拍照方向
    });

    var dataURL = reader.result;
    var imaged = new Image();
    imaged.src = dataURL;
    imaged.onload = function () {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    //普通环境下设置canvas的宽高
    var w = 1000, h = 0;
    w = this.width;
    h = this.height;
    canvas.width = w;
    canvas.height = h;
    ctx.drawImage(this, 0, 0, w, h);
    var dataURL = canvas.toDataURL('image/jpeg');

    if (navigator.userAgent.match(/iphone/i)) {
    if (orientation != "") {
    switch (orientation) {
    case 3:
    ctx.rotate(180 * Math.PI / 180);
    ctx.drawImage(this, -w, -h, w, h);
    break;
    case 6:
    //这里由于将图片纠正了回来,所以也要重新设置canvas的高已达到高度自适应
    canvas.width = 750;
    var scale = this.height / this.width;
    canvas.height = canvas.width / scale;
    h = 750 > this.height ? this.height : 750;
    w = h / scale;
    ctx.rotate(90 * Math.PI / 180);
    ctx.drawImage(this, 0, -h, w, h);
    show();
    break;
    case 8:
    ctx.rotate(270 * Math.PI / 180);
    ctx.drawImage(this, -h, 0, h, w);
    show();
    break;
    case 2:
    ctx.translate(w, 0);
    ctx.scale(-1, 1);
    ctx.drawImage(this, 0, 0, w, h);
    show();
    break;
    case 4:
    ctx.translate(w, 0);
    ctx.scale(-1, 1);
    ctx.rotate(180 * Math.PI / 180);
    ctx.drawImage(this, -w, -h, w, h);
    show();
    break;
    case 5:
    ctx.translate(w, 0);
    ctx.scale(-1, 1);
    ctx.rotate(90 * Math.PI / 180);
    ctx.drawImage(this, 0, -w, h, w);
    show();
    break;
    case 7:
    ctx.translate(w, 0);
    ctx.scale(-1, 1);
    ctx.rotate(270 * Math.PI / 180);
    ctx.drawImage(this, -h, 0, h, w);
    show();
    break;
    default:
    ctx.drawImage(this, 0, 0, w, h);
    show();
    }
    }
    }
    else {
    ctx.drawImage(this, 0, 0, w, h);
    show();
    }
    function show(){
    var str='<div class="img_item"><img src="'+dataURL+'"><i class="del"></i></div>';
    if(num<6){
    var flg=true;
    for(var i=0;i<imgArr.length;i++){
    if(imgArr[i]==dataURL){
    alert('不能重复上传图片!!!');
    flg=false;
    }
    }
    if(flg==true){
    $('.img_list').prepend(str);
    imgArr.push(dataURL);
    $('.mo').css('display','none');
    $('.fot').css('display','none');
    num++;
    }
    }
    else{
    alert('图片上限为6张!');
    $('.mo').css('display','none');
    $('.fot').css('display','none');
    }
    }

    };


    };
    }
    }
    //删除图片
    $(".del-wrapper").on("click",".del",function(){
    var index=$(this).parent().index();
    console.log(index);
    imgArr.splice(index,1);
    num=num-1;
    $(this).parent().remove();
    });

    $('.openImg').click(function(){
    $('.mo').css('display','block');
    $('.fot').css('display','block');

    });
    $('.c').click(function(){
    $('.mo').css('display','none');
    $('.fot').css('display','none');
    });

    //监控文本域的长度和内容
    var textLen=0;
    $('#textareaVal').on('input',function(){
    textLen=$('#textareaVal').val().length;
    if(textLen>0){
    $('.btn').addClass('btn_submit');
    }
    else{
    $('.btn').removeClass('btn_submit');
    }
    $('.text_num').html(textLen);
    });

    })
    </script>

    </body>
    </html>

    CSS文件


    .tit {
    100%;
    height: 2.66667rem;
    padding: 0.32rem 0 0.32rem 0.32rem;
    background: #ffffff; }
    .tit .titL {
    2.13333rem;
    height: 1.86667rem; }
    .tit .titL img {
    display: block;
    100%;
    height: 100%; }
    .tit .titR {
    7.52rem;
    height: 1.86667rem;
    padding-top: 0.26667rem;
    padding-left: 0.26667rem; }
    .tit .titR p {
    6.82667rem;
    height: 0.93333rem;
    font-size: 0.37333rem;
    line-height: 0.48rem;
    color: #4c4c4c;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; }

    .ping p.p_tit {
    100%;
    height: 1.06667rem;
    padding: 0.48rem 0 0.24rem 0.32rem;
    font-size: 0.37333rem;
    color: #4c4c4c;
    background: #f5f5f5; }
    .ping .ly {
    font-size: 0.37333rem;
    color: #4c4c4c;
    padding: 0.42667rem 0.32rem 0 0.32rem;
    background: #ffffff;
    position: relative; }
    .ping .ly textarea {
    border: none;
    100%;
    height: 4.8rem;
    background: #ffffff;
    font-size: 0.37333rem;
    color: #4c4c4c; }
    .ping .ly textarea ::-webkit-textarea-placeholder {
    color: #999999; }
    .ping .ly span {
    font-size: 0.32rem;
    color: #999999;
    position: absolute;
    right: 0.32rem;
    bottom: 0.4rem; }
    .ping .img_group {
    100%;
    background: #ffffff;
    padding: 0.4rem 0.32rem;
    border-top: 1px solid #ededed; }
    .ping .img_group p {
    font-size: 0.37333rem;
    color: #4c4c4c;
    margin-bottom: 0.48rem; }
    .ping .img_group .img_list {
    100%;
    height: 2rem;
    max-height: 4rem;
    background: #ffffff; }
    .ping .img_group .img_list .img_item {
    display: block;
    float: left;
    border-radius: 0.10667rem;
    2rem;
    height: 2rem;
    margin-right: 0.34667rem;
    position: relative; }
    .ping .img_group .img_list .img_item img {
    display: block;
    border-radius: 0.10667rem;
    100%;
    height: 100%; }
    .ping .img_group .img_list .img_item i {
    background: url("../img/de_ete.png") no-repeat;
    background-size: 100%;
    display: block;
    0.64rem;
    height: 0.64rem;
    position: absolute;
    right: -0.18667rem;
    top: -0.21333rem; }
    .ping .img_group .img_list .img_item:nth-of-type(4) {
    margin-right: 0; }
    .ping .img_group .img_list .img_item:nth-of-type(5), .ping .img_group .img_list .img_item:nth-of-type(6), .ping .img_group .img_list .img_item:nth-of-type(7) {
    margin-top: 0.42667rem;
    margin-bottom: 0.4rem; }
    .ping .btn_div {
    clear: both;
    100%;
    height: 2.64rem;
    background: #f5f5f5;
    padding-top: 0.66667rem; }
    .ping .btn_div button {
    display: block;
    9.4rem;
    height: 1.28rem;
    line-height: 1.28rem;
    text-align: center;
    color: #ffffff;
    margin: 0 auto;
    border: none; }
    .ping .btn_div button.btn {
    background: #cccccc; }
    .ping .btn_div button.btn_submit {
    background: #f02e34; }

    .mo {
    position: fixed;
    top: 0;
    100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); }

    .fot {
    position: fixed;
    100%;
    height: 4.10667rem;
    bottom: 0.13333rem; }
    .fot .fot_item {
    display: block;
    100%;
    height: 1.28rem;
    line-height: 1.28rem;
    text-align: center;
    font-size: 0.42667rem;
    color: #4c4c4c;
    position: relative; }
    .fot .fot_item button {
    display: block;
    9.09333rem;
    height: 100%;
    background: #ffffff;
    position: absolute;
    left: 50%;
    margin-left: -4.54667rem;
    border: none; }
    .fot .fot_item input {
    display: block;
    2.21333rem;
    height: 0.72rem;
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 50%;
    margin-left: -1.10667rem;
    margin-top: -0.36rem;
    opacity: 0; }
    .fot button.a {
    border-radius: 0.13333rem 0.13333rem 0 0;
    border-bottom: 1px solid #ededed; }
    .fot button.b {
    border-radius: 0 0 0.13333rem 0.13333rem; }
    .fot button.c {
    margin-top: 0.13333rem;
    border-radius: 0.13333rem; }

    .success {
    position: fixed;
    top: 50%;
    left: 50%;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    font-size: 0.37333rem;
    color: #ffffff;
    border-radius: 0.13333rem;
    2.88rem;
    height: 1.2rem;
    line-height: 1.2rem;
    margin-top: -0.6rem;
    margin-left: -1.44rem; }


     
  • 相关阅读:
    Codeforces 992C(数学)
    Codeforces 990C (思维)
    Codeforces 989C (构造)
    POJ 1511 Invitation Cards(链式前向星,dij,反向建边)
    Codeforces 1335E2 Three Blocks Palindrome (hard version)(暴力)
    POJ 3273 Monthly Expense(二分)
    POJ 2566 Bound Found(尺取前缀和)
    POJ 1321 棋盘问题(dfs)
    HDU 1506 Largest Rectangle in a Histogram(单调栈)
    POJ 2823 Sliding Window(单调队列)
  • 原文地址:https://www.cnblogs.com/qiuchuanji/p/7736465.html
Copyright © 2011-2022 走看看