js图片上传_js评论上传图片-CSDN博客

本文链接：https://blog.csdn.net/too_money/article/details/101752210

图片上传

jsp页面

本地上传后台校验

该演示只是演示给大家方法由于诸多原因没有css样式请谅解
html部分

<div class="sc-flie-cn3" style="width: 400px;height: 400px; display: none;">

                                <span class="quxiao" style="position: relative;" onclick="cn2()">返回&gt;</span>
                                <div class="quxiao_b" style="position: relative;"></div>
                                <div class="sc-flie-top" style="width:300px;height: 300px; position: relative; margin: 0 auto">
                                
                                <img id="readyimg_lei" src="${path }/images/u181.svg" ></img>
                                <img id="readyimg1" src="${path }/images/u183.svg" ></img>
                                <!-- 对勾 -->
                                <img id="thehook" style="opacity: 0;" src="${path }/images/thehook.png" ></img>
                                <!-- 印章 -->
                                <img id="theseal" style="opacity: 0;" src="${path }/images/theseal.png" ></img>
                                </div>
                                <!-- <input type="file" name="upfile" id="upfile"> -->
                                <form id="uploadForm" method="post" action="${path }/FaceRecognitionController/registerFace" enctype="multipart/form-data">
                                <div class="photo_btn2" id="photo_btn2">
                                    <input type="file" name="upfile" id="upfile">
                                    <button type="button" onclick="dead()" style="margin-top:15px; " ><span style="border-radius: 0;background-color: skyblue;">
                                    上传
                                    </span>
                                    </button>
                                </div> 
                                </form>
                            </div>

js部分

$("#upfile").on("change", function() {
    var ret = getPhotoInfo(this);
    // console.log(this)
    var objUrl = getObjectURL(this.files[0]);
    if (objUrl) {
        // console.log(objUrl)
        $("#readyimg_lei").attr("src", objUrl);
        $("#readyimg1").hide();
    }

});
//建立一個可存取到该file的url  
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;
}
//用于获取图片后缀名
function getPhotoInfo(obj) {
    var ret = {};
    var photoExt = obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase(); //获得文件后缀名
    ret.ext = photoExt;
    
    return ret;
}

//实现本地图片上传预览效果
//预览成功后 上传图片（包含一个动画效果 ）代码比较冗余请谅解
function dead() {
    var lond = $("#readyimg_lei").attr("src");
    var lond_b = "/ylitech-web-1.0.0/images/u181.svg";

    if (lond == lond_b) {
        alert("请上传图片")
        return false
    }
    var ppp = [];
    var pp = $("input[name = 'upfile']");
    for (key in pp) {
        // console.log(pp[0])
        ppp.push(pp[0])
    }

    var ret = getPhotoInfo(pp[0]);

    $('#uploadForm').ajaxSubmit({
        data: { 'username': username },
        beforeSubmit: function(a, f, o) {
            if ($.inArray(ret.ext, [".jpg", ".jpeg", ".png", ".jpg", ".bmp", ".gif"]) == -1) {
                $.jBox.error('图片文件格式不匹配！', '错误');
                return false;
            } else if (ret.size > 5 * 1024 * 1024) {
                $.jBox.error('图片文件超过5M！', '错误');
                return false;
            }
            return $("#upfile").val().length > 0;
        },

        success: function(data) {
          
            if (data.code == 0) {
                $.jBox.error(data.msg, '错误');
                return;
            }
            if (data.code == 1) {

                setTimeout(function() {
                
                    $("#thehook").animate({ opacity: '1' }, 1000);
                    setTimeout(function() {
                        $("#theseal").animate({ opacity: '1' }, 3000);
                        $("#photo_btn2").hide();
                        $(".quxiao").hide();
                        $(".quxiao_b").show();
                    }, 5000);
            
                }, 2000);
            }
        
        }
    });
}

拍照上传后台校验

html部分

<div class="sc-flie-cn2" style="width: 400px;height: 400px;display: none;">

                                <span class="quxiao" style="position: relative;" onclick="cn2()">返回&gt;</span>
                                
                                <div class="sc-flie-top" style="width:300px;height: 300px; position: relative; margin: 0 auto">
                                <video id="video" width="300px" height="300px" autoplay="autoplay"></video>
                                
                                <canvas id="canvas" width="300px" height="300px" style="left: 0; position: absolute; top: 0;"></canvas>
                     
                                </div>
                              
                                <div class="photo_btn3">
                                    <span onclick="getMedia()">启动摄像头</span>
                                    
                                    <span id="snap" onclick="takePhoto()">拍摄</span>
                                    
                                    <button type="button" id="btn3" style="margin-top:15px; "><span style="border-radius: 0;background-color: skyblue;">上传</span></button>
                                </div>

                            </div>

js部分

//摄像头
function getMedia() {
    let constraints = {
        video: { width: 500, height: 500 },
        audio: false,

    };
    //获得video摄像头区域
    let video = document.getElementById("video");
    //这里介绍新的方法，返回一个 Promise对象
    // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
    // then()是Promise对象里的方法
    // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
    // 避免数据没有获取到
    let promise = navigator.mediaDevices.getUserMedia(constraints);
    promise.then(function(MediaStream) {
        video.srcObject = MediaStream;
        video.play();
    });
    $('#canvas').hide();
    $('#video').show();
}

function takePhoto() {
    //获得Canvas对象
    let video = document.getElementById("video");
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, 300, 300);
    $('img').css('src', canvas.toDataURL("image/png", 0.5))
    // console.log(canvas.toDataURL("image/png"));
    //canvas.toDataURL 中包含的是img的信息。
    $('#video').hide();
    $('#canvas').show();
}
var btn = document.getElementById('btn3');
//点击事件触发函数
btn.onclick = function() {
    console.log(canvas.toDataURL("image/png"));
    var str_img = canvas.toDataURL("image/png")
    console.log(str_img)
    console.log(path)
    post(path + '/FaceRecognitionController/registerFace2', { str_img: str_img }) //调用函数

}
//$.ajax post异步请求 封装函数
function post(url, data) {
    $.ajax({
        type: "POST",
        url: url,
        contentType: 'application/x-www-form-urlencoded;charset=utf-8',
        data: data,
        dataType: "json",
        success: function(data) {
            console.log(data);
            location.reload();
        },
        error: function(e) {
            console.log(e);
        }
    });
}

**由于是新手可能代码写得有点随意但是效果达到了希望可以给大家带来帮助有什么见解随时可以进行评论 **