Jquery获取上传文件/照片的大小

  • Post author:
  • Post category:其他


 * 添加实名认证
 * 创建于 2019/05/07
<div class="m_reallist">
    <form action="/user/add_directories" method="post" enctype="multipart/form-data" id="submitForm">
        <div class="m_addrealbtn m_reallist_preview" id="cardA">
            <p>上传身份证正面照</p>
            <input class="filein" type="file" name="positive" accept="image/*" multiple
                   onchange="filePreview(this,'previewone')" id="cardAA"/>
            <div id="previewone" class="m_reallist_preview">
                <img src="">
            </div>
        </div>
        <div class="m_addrealbtn" id="cardB">
            <p>上传身份证背面照</p>
            <input class="filein" type="file" name="reverse" accept="image/*" multiple
                   onchange="filePreview(this,'previewtwo')" id="cardBB"/>
            <div id="previewtwo" class="m_reallist_preview">
                <img src="">
            </div>
        </div>
        <input type="hidden" name="backUrl" value="$!{backUrl}">
    </form>
</div>
<div class="m_reallist_foot">
    <button type="button" id="butsub">确认添加</button>
</div>
<script src="${rc.contextPath}/static/js/touch.min.js" type="text/javascript"></script>
<script>
    $('#cardA').click(function () {
        document.getElementById("cardAA").click();
    });
    $('#cardB').click(function () {
        document.getElementById("cardBB").click();
    });
    ##错误信息提示
    $(function () {
        var msg = '$!msg';
        if(msg != ''){
            alert(msg);
        }
    })
    $("#butsub").click(function () {
        //获取身份证正面文件列表
        var files = $('input[name="positive"]').prop('files');
        //获取身份证反面文件列表
        var file = $('input[name="reverse"]').prop('files');
        console.log(files);
        if (files.length == 0 || file.length == 0) {
            if (confirm("身份证正面或反面未添加")) {
                reloadXX();
            } else {
                reloadXX();
            }
        }
        //获取正面照片大小(单位byte)),console.log(sizes);
        var sizes = files[0].size;
        //获取反面照片大小, console.log(size);
        var size = file[0].size;
        //获取正反面照片的总大小, console.log(totalSize);
        var totalSize = sizes+size;
        //总大小限制在14M以下,14680064(byte),但实际是有所偏差的,用户可能上传正好为14M,但是还是会不让上传)
        var designSize=6291456;
        if (totalSize > designSize) {
            if (confirm("正反面证件照总大小不能超过14M,请重新筛选证件照!")) {
                reloadXX();
            } else {
                reloadXX();
            }
        } else{
            $('#submitForm').submit();
        }
    });
    function reloadXX() {
        var time = new Date().getTime();
        window.location.href=window.location.href+time;
    }
    function filePreview(file,preview){
        var prevDiv = document.getElementById(preview);
       var inval=new Array("jpg","jpeg","png");
        var valinl=file.value.lastIndexOf('.');
        var valin=file.value.substr(valinl+1);
        if(inval.toString().indexOf(valin) > -1){
            if (file.files && file.files[0]){
                var reader = new FileReader();
                reader.onload = function(evt){
                    prevDiv.style.display="block";
                    prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
                }
                reader.readAsDataURL(file.files[0]);
            }else{
                prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
            };
        }else{
            alert('格式错误');
            file.value=null;
            return false;
        };
    };
    touch.on('.m_addreal_btn','touchend',function (ev) {
        $(ev.target.nextElementSibling).click();
    });
</script>



版权声明:本文为yihuaiyan原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。