H5移动端多图上传+进度条


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>666</title>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, ol {
            list-style-type: none;
        }

        .clearfix:after, .clearfix:before {
            display: table;
            content: ' ';
        }

        .clearfix:after {
            clear: both;
        }

        .tc {
            text-align: center;
        }

        .select, .select_video {
            height: 2rem;
            line-height: 2rem;
            background: #fff;
            border: 1px solid #4285F4;
            margin: 0.5rem 1rem;
            position: relative;
        }

            .select label, .select_video label {
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                font-size: 14px;
                color: #333;
            }

        #upload, #upload_video {
            display: none;
        }

        .preview, .video_preview {
            margin: 0.5rem 1rem;
            /*border:0px solid #bbb;*/
            padding: 4px;
            display: none;
        }

        .preview_img_list li {
            float: left;
            width: 25%;
            padding: 2px 0;
        }

            .preview_img_list li img {
                vertical-align: top;
                max-width: 98%;
            }

        .btn {
            background: #4285F4;
            color: #fff;
            height: 2.5rem;
            line-height: 2.5rem;
            margin: 2rem 1rem;
            border-radius: 0.5rem;
        }
    </style>
</head>
<body>
    <%--<h2 class = "tc">图片上传</h2>--%>
    <%--<div style="bottom:15%;height: 40px;width: 40px;/*border:1px solid red;*/float: right;position: fixed;right: 24px;z-index:2" onclick="returnF()">返回首页</div>--%>

    <div style="position: absolute; width: 100%; height: 100%; background-color: white;">
        <form id="form1" name="form1" class="tc" action="">
            <div style="margin-top: 10%; float: left; margin-left: 5%;"><span>真实姓名:</span><input style="margin-left: 20px; font-size: 17px; border: 0px solid; outline: none" name="name1" id="name1"></div>
            <div style="margin-top: 10%; float: left; margin-left: 5%;"><span>联系方式:</span><input style="margin-left: 20px; font-size: 17px; border: 0px solid; outline: none" name="tel" id="tel"></div>
            <textarea id="txtValue" name="txtValue" style="width: 90%; height: 80px; font-size: 14px; border: 0px; outline-style: none; margin-top: 15%;" placeholder="这一刻的想法..."></textarea>
            <div class="select tc">
                <label for="upload">图片上传及预览</label>
                <input type="file" id="upload" name="upload" style="/* visibility: hidden */" accept="image/*" name="" value="">
            </div>
            <div class="preview">
                <ul class="preview_img_list clearfix">
                </ul>
            </div>

            <%--  <div class="select_video tc">
            <label for="upload_video">视频上传及预览</label>
            <input type="file" id = "upload_video" accpet = "video/*" capture = "camcorder">
        </div>--%>

            <div class="video_preview">
            </div>

            <div class="submit btn tc" onclick="up()">上传</div>
            <div id="divK" style="display:none;height: 100%; width: 100%;text-align:center">
                <progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
                <br/>
                <span id="percentage"></span><span id="time"></span>
            </div>
        </form>
    </div>

</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script>
    function returnF(rankType) {
        location.href = "index.aspx";
    }
    $(function () {
        //var formData
    })

    /**判断是否是手机号**/
    function isPhoneNumber(tel) {
        var reg = /^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/;
        return reg.test(tel);
    }


    window.onload = function () {
        var uploadBtn = document.querySelector('#upload');
        var previewImgList = document.querySelector('.preview_img_list');
        //var uploadVideo = document.querySelector('#upload_video');
        var submitBtn = document.querySelector('.submit');

        imgArr = new Array();

        uploadBtn.addEventListener('change', function () {
            var imgLen = this.files.length;
            var liLen = previewImgList.getElementsByTagName('li').length;
            var ImgLen = imgLen + liLen;

            if (ImgLen > 9) {
                swal("上传最大数量不能大于9");
                return false;
            }

            document.querySelector(".preview").style.display = 'block';

            for (var i = 0; i < imgLen; i++) {
                var file = this.files[i];
                var imgType = /^image\//;
                if (!imgType.test(file.type)) {
                    continue;
                }
                var li = document.createElement('li');
                var img = document.createElement("img");
                li.appendChild(img);
                previewImgList.appendChild(li);
                var reader = new FileReader();
                reader.onload = (
                    function (aImg) {
                        return function (e) {
                            aImg.src = e.target.result;
                            initHW();
                            imgArr.push(e.target.result);
                        };
                    }
                )(img);
                reader.readAsDataURL(file);

                //img.addEventListener("dblclick", function () {
                //    debugger
                //    $(this).parent().remove();
                //});

                $(img).click(function () {
                    imgArr.splice($(this).parent().index(), 1);
                    $(this).parent().remove();
                });

                var objectUrl = window.URL.createObjectURL(file);
                img.src = objectUrl;
            }

        }, false);

        //submitBtn.addEventListener('click',function(){
        //    if(!imgArr.length){
        //        alert('请选择要上传的图片');
        //        return false;
        //    }
        //    var form = document.querySelector('form');
        //    var formData = new FormData(form);
        //    for (var i = 0; i < imgArr.length; i++) {
        //        formData.append('file'+ i.toString(), imgArr[i]);
        //    }
        //    var request = new XMLHttpRequest();
        //    request.open('post',"CPVoteHelper.ashx?action=upload");
        //    request.send(formData);
        //    request.onreadystatechange = function(){
        //        if(request.readyState === 4 && request.status === 200){
        //            location.href = "index.aspx";
        //        }
        //    }
        //},false);

    }

    var request;
    var isUp = false;
    var isReturn;
    function up() {
        isReturn = false;
        if (!isPhoneNumber($('#tel').val())) {
            isReturn = true;
            swal('请输入正确的手机号码！');
        }
        if (!isReturn && $('#name1').val() == "") {
            isReturn = true;
            swal('请输入姓名！');
        }
        if (isReturn)
            return false;

        if (isUp)
            return false;
        isUp = true;
        if (!imgArr.length) {
            swal('请选择要上传的图片');
            return false;
        }
        var form = document.querySelector('form');
        var formData = new FormData(form);
        for (var i = 0; i < imgArr.length; i++) {
            formData.append('file' + i.toString(), imgArr[i]);
        }


        request = new XMLHttpRequest();
        request.open('post', "CPVoteHelper.ashx?action=upload", true);
        request.onerror = uploadFailed; //请求失败
        request.upload.onprogress = progressFunction;
        request.upload.onloadstart = function () {//上传开始执行方法
            ot = new Date().getTime();   //设置上传开始时间
            oloaded = 0;//设置上传开始时，以上传的文件大小为0
            $('#divK').show();
        };
        request.onload = uploadComplete;
        //request.onreadystatechange = function () {
        //    if (request.readyState === 4 && request.status === 200) {
        //        location.href = "index.aspx";
        //    }
        //}
        try{
            request.send(formData);
        }
        catch (ex) {
            swal('图片解码失败，请刷新页面后重新上传！');
        }
    }

    function uploadComplete() {
        var data = request.responseText;
        debugger
        if (data == '-1' || data == '0')
            swal('上传图片发生未知错误，请刷新后提交3M以下图片！');
        else
            location.href = "detail.aspx?id=" + data;
            //location.href = "index.aspx";
    }
    // 初始化图片宽度
    // 使得图片高度一致
    function initHW() {
        var previewImgList = document.querySelector('.preview_img_list');
        var Lis = previewImgList.getElementsByTagName('li');

        var LisLen = Lis.length;

        if (LisLen > 1) {
            var img = Lis[0].getElementsByTagName('img')[0];

            var imgW = img.width;
            var imgH = img.height;

            for (var i = 1; i < LisLen; i++) {
                var img = Lis[i].getElementsByTagName('img')[0];
                img.style.width = imgW + 'px';
                img.style.height = imgH + 'px';
            }
        }

    }

    function uploadFailed() {
        $('#divK').hide();
        swal("上传失败,请刷新后重试！");
    }

    var ot;//
    var oloaded = 0;
    function progressFunction(evt) {
        var progressBar = document.getElementById("progressBar");
        var percentageDiv = document.getElementById("percentage");
        // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
        if (evt.lengthComputable) {//
            progressBar.max = evt.total;
            progressBar.value = evt.loaded;
            percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
        }

        var time = document.getElementById("time");
        var nt = new Date().getTime();//获取当前时间
        var pertime = (nt - ot) / 1000; //计算出上次调用该方法时到现在的时间差，单位为s
        ot = new Date().getTime(); //重新赋值时间，用于下次计算

        var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b       
        oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算

        //上传速度计算
        var speed = perload / pertime;//单位b/s
        var bspeed = speed;
        var units = 'b/s';//单位名称
        if (speed / 1024 > 1) {
            speed = speed / 1024;
            units = 'k/s';
        }
        if (speed / 1024 > 1) {
            speed = speed / 1024;
            units = 'M/s';
        }
        speed = speed.toFixed(1);
        //剩余时间
        var resttime = ((evt.total - evt.loaded) / bspeed).toFixed(1);
        time.innerHTML = '，速度：' + speed + units + '，剩余时间：' + resttime + 's';
        if (bspeed == 0)
            time.innerHTML = '上传已取消';
    }

</script>
H5移动端多图上传+进度条

猜你喜欢
