前端上传图片压缩预览上传进度例子

女生学前端好还是后台开发
web前端和后台开发
前端,后台开发必备技能

html 代码

    <head>
        <meta charset=”utf-8″ />
        <meta
            name=”viewport”
            content=”width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no”
        />
        <meta name=”format-detection” content=”telephone=no” />
        <title>前端上传图片压缩预览上传进度例子</title>
        <style>
            body {
                font-family: Microsoft Yahei, helvetica;
                position: relative;
            }
            body,
            button,
            dd,
            dl,
            dt,
            form,
            h1,
            h2,
            h3,
            h4,
            iframe,
            img,
            input,
            li,
            p,
            td,
            textarea,
            ul {
                margin: 0;
                padding: 0;
                border: 0;
                resize: none;
                outline: 0;
            }
            table {
                border-spacing: 0;
                border-collapse: collapse;
            }
            canvas,
            iframe {
                display: block;
            }
            img {
                border: none;
                vertical-align: middle;
            }
            li {
                list-style-type: none;
            }
            a:active,
            a:hover,
            a:link,
            a:visited {
                text-decoration: none;
                color: inherit;
            }
            /*常用类*/
            .hide {
                display: none !important;
            }
            .notEvent {
                pointer-events: none;
            }
            /*清除浮动*/
            .clearfix:after {
                content: ‘.’;
                display: block;
                height: 0;
                visibility: hidden;
                clear: both;
                overflow: hidden;
            }
            /*图片列表*/
            .imagelist {
            }
            .imagelist ul {
                padding: 0;
                margin: 0;
            }
            .imagelist li,
            .imagelist .newbtn {
                width: 80px;
                height: 80px;
                position: relative;
                float: left;
                margin: 10px 10px 0 0;
            }
            .imagelist li {
                background-color: #eee;
                background-position: 50% 50%;
                background-repeat: no-repeat;
                background-size: cover;
            }
            .imagelist li i {
                position: absolute;
                z-index: 2;
                top: -8px;
                right: -8px;
                cursor: pointer;
                width: 14px;
                height: 14px;
                line-height: 14px;
                font-size: 12px;
                padding: 4px;
                font-style: initial;
                text-align: center;
                color: #fff;
                border-radius: 50%;
                background: rgba(0, 0, 0, 0.6);
            }
            .imagelist li i:active {
                transform: scale3d(0.92, 0.92, 1);
                -webkit-transform: scale3d(0.92, 0.92, 1);
            }
            .imagelist li[data-load=’1′] {
                background: rgba(0, 0, 0, 0.4);
            }
            .imagelist li[data-load=’1′]:after {
                content: ”;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -15px 0 0 -15px;
                width: 30px;
                height: 30px;
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAOVBMVEUAAAD///////////////////////////////////////////////////////////////////////8KOjVvAAAAEnRSTlMAQBCgIDDAcGBQ79DwgJCw3+CkjUt9AAACqUlEQVRo3uzV266DIBRF0cVG7l5w/f/HntNGSRq1qK1JHxyvDZ2A24iDmiHnocGlTOS/aHClxKeECwkngusoThSKO3JHfiwiOnNQ5yJqYNaCqibyIZyJeD7EBjUDn6I5HjGRTxo1nGQ5GpHMye4I09FI4u5Iy5k+FtGcjahxLNzy1jlpKutqLIuwdc528UNgYVEnibNoNvbrVgZrlgQ7mPbNgo7/ujcbaw1q6kdvQmjeXbHCTo5Fjx16Fg67aRYNqhoWGgckzjyqPGcJR8jISYeqjpNRUBwasYCqUBms6kqLHey8n8N8+2gIdpBHpfU4QYIz2Mm4ILjdbr9PdGS2XTD4MuM7mxm1AJI5S7pTgi8Q1enEWRb0fBUHj4/4IfJVj8gFjQ9oLkRwhcdpnitguWRx1sbfqdX0aVyhVg+YcFrauHxxOl31TKx2gsKEzo7fnK5x6/0W5XqrFT6itO2dur/4f+2Zza7EIAiFqWL9qY6t7/+wN3dFTEAz4mIW/ZZNWgsGOHpeXl5efhn0y+0+2tMjzDEl0eBaGVipmOm/3DSCV0fvHWGEOzWy6KKXnZypj04WddLUCNGmThYp5VDi8n1crcPD15TWcR18poiq0KhSzmrryAWWKHlwPnCtwyIsgrZ1IBCezeWc6d56fpEcQEnI/CLI7dWceb0hI5NPhC3gyUr3/8WfCNuID3epbA4HElhsMfxjOXR3mK+7a4p8Gwqgh4ooGdZhawg7sHw381TVeozQzmpjIlQfNYtgNQTQUwXzKVKEalD03B4qay1etGs+0nxTzFQn+oEXKEH2S/p8yTmRM6njpr+Vo7xBxTHUeiftlwY7rLiw5UKRbijNsOMk0EBVPe4GWxaJEwMXNNSJjf9o94TsxhzHRmF2oAJtztWBiKs5TwXnH6uwZgJe+S0LAAAAAElFTkSuQmCC)
                    no-repeat;
                background-size: 100%;
                animation: rotate_cw 2s linear infinite;
                -webkit-animation: rotate_cw 2s linear infinite;
            }
            .imagelist .newbtn {
                background: #eee;
                box-sizing: border-box;
                padding: 15px;
                border-radius: 2px;
            }
            .imagelist .newbtn:active {
                background: #ddd;
            }
            .imagelist .newbtn img {
                width: 50px;
                height: 50px;
            }
            .imagelist .newbtn input {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
            }
            /*form*/
            .formwrap {
                padding: 10px;
            }
            .formwrap button[type=’submit’] {
                display: block;
                margin: 30px 0;
                background: #1b82d2;
                font-size: 15px;
                color: #fff;
                line-height: 24px;
                width: 600px;
                max-width: 100%;
                padding: 10px 0;
                border-radius: 3px;
            }
            .formwrap button[type=’submit’]:active {
                background: #1275c1;
            }
            /*上传提示*/
            .uploadPrompt {
                position: fixed;
                width: 80px;
                padding: 10px;
                text-align: center;
                left: 50%;
                top: 50%;
                z-index: 500;
                background: rgba(0, 0, 0, 0.6);
                border-radius: 5px;
                transform: translate3d(-50%, -50%, 0);
                -webkit-transform: translate3d(-50%, -50%, 0);
            }
            .uploadPrompt .ico {
                width: 30px;
                height: 30px;
                margin-top: 5px;
                animation: rotate_cw 1.5s linear infinite;
                -webkit-animation: rotate_cw 1.5s linear infinite;
            }
            .uploadPrompt .text {
                margin: 0;
                color: #fff;
                line-height: 20px;
                font-size: 14px;
                margin-top: 8px;
            }
            @keyframes rotate_cw {
                0% {
                    transform: rotateZ(0);
                }
                100% {
                    transform: rotateZ(360deg);
                }
            }
            @-webkit-keyframes rotate_cw {
                0% {
                    -webkit-transform: rotateZ(0);
                }
                100% {
                    -webkit-transform: rotateZ(360deg);
                }
            }
        </style>
    </head>
    <body>
        <form
            method=”post”
            action=””
            enctype=”multipart/form-data”
            class=”formwrap”
            id=”FormWrap”
        >
            <div class=”imagelist clearfix” id=”UploadingImages”>
                <ul id=”UploadingContainer”></ul>
                <div class=”newbtn” id=”UploadingBtn”>
                    <img
                        src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAQlBMVEUAAAC7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7slxJwQAAAAFXRSTlMAgEDAEGAw79CgIPC/cLDgT5Dfjz9bMdKnAAAE6ElEQVR42uzb6Y7aMBSG4ePgPSuB7/5vtUXtZAFvMEp7MvLzezLSK8fGxIGqqqqqqqqqqqqqqqqq6kHe74IXdb/Tu3zfgSPjJnqDFAZszYpKKcYZD52kIgLcGU0FHE6goaweZ5AfkwnnYCWlzTgJ8RNurAfjKYX5wrvlymfIIJix2DClS6/1xE7TYqXLproljnThdN/1siSwGCjKcx+Q3ZBcKKrZ/hVTWNifEoIawkIN4aaGcFNDuKkh3NQQbmoINzUkSU5i6B6E8hR0hhDZW2zMItTCP8Q7g2fuNYV9iDAIuUnaYx7iLSJmTTu8Q7RBnKIt1iFrR76Ec8jaUVLCN0Qa5Gha8Q3pkDVLWrAN6d88hOEa8nxjXfrGy2Zybez4mGuI2Gf4JVDsUjr6wjXERJcnPQbnO9MQlVhmpcXqSn8xDRmw6umJbgNHlUxDDBYjvRCBe4tnSIPVRK/GwHixDFFYtBRwDUwSliECC1f4D3iGXDOn3PIsIZfcFjewbHEP6SkkMIdYhuRuLX+WWyv3AsV0lhCVmQPuLMuvTn+hleYsH4jUYjHLE29RaMDKJS5fd2JMQxTi219tTrSNpxaxMZkMNjx9YRoiIr8c8AO2BirjJ/E4mAC6rhuEmPw/C5Etdozr73cl7AdPtuR0s3jR3ZQ/MGSlUOCar1AWUfamjw+hAVmjpDTtDNJm1xwdIsfvPjJVFiWskgc/xG6RptIZM0oZ5w8JyZfkO5oZb3H+mJB8SatSGR3e5vxxISQviLA6cdWAjzh54GFo3yJEyMQlBh8y/XEhJEX71vG07vANVh/5woAasGF7n8pG2Hjtm+ZPaaPEZUTMTR4QsmqEu/zmxCQpQVuEDK/tXrkxNij//6WaX+3d227jIBCA4QGGGBsfs5r3f9WNlGrRKlMMJQrjar7rXvQPhzjGUQw7Fga/yz74FtM5ZJrZt23I2Vd2ULBnyM5sVs6e5x+R2b5stxAcmUmVRqN2X6SlRwi/yqMBRvFe1yGE/0L5ilXry0kIYabVZqGS3bqHMNPqQKiGR+cQP7QORxqUniF/mocjwbVbCM4vm9XeNLyxQwj7SJfDxgW39QhZmMukVuiaQ9p33e0GbzB+OGQK/LRqt3w0ZB8y06qR/2CIedmtLLyPbwhp3HUDwjv5hpCmXXeEN/O1IaFxMaabdV0OelpeS1y5Xbd/CI0INezAfvIQEFK3Tg3xu66EEBpszUcPftcVEcK8qqV3dYOYU90v81R834pfX1JCCgbFDLldV04IBQsZ+z1/RCIohGi2mVl1Nq0khRDNnv3zlV7EBf4jLIRoeDnD3+eikzdpIQ/Dutz+VYxD4RMPAkOewjynoTh/E5QbkhRdW3UPcXukKtsOnP4h+VPx4tuIAkIAbCBG3ZumiBAAvxGj6gRKRgiAiXQimtysEhMC4IOgjLZTXTtG4jkPJ0SFPOzMGX44bnBOWMjD5I0L9BTd6icoIi/kC1pblSA2pJKGaIiG5GmIhmhInoZoiIbkaYiGXC8kXjoEy/5FShBE8tUhBiTCe9kZxkqJB3lwpMSXPhYzSvvlDvR3Kpz8E12Hu/7Pij1ZgF8xJA7yDroICycCXcICZzDSBYxw7naBMRlLn0IXboFCXvT0chaKodlIqJRR6LasTtZqic4dXuhFuVJKKaWUUkoppZRSP/MXtDDy+6ZXL4EAAAAASUVORK5CYII=”
                    />
                    <input
                        data-role=”none”
                        type=”file”
                        multiple=”multiple”
                        accept=”image/gif,image/jpeg,image/png”
                        id=”UploadControl”
                    />
                </div>
            </div>
            <button type=”submit”>提交</button>
        </form>
        <div class=”uploadPrompt hide” id=”UploadPrompt”>
            <img
                class=”ico”
                src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAOVBMVEUAAAD///////////////////////////////////////////////////////////////////////8KOjVvAAAAEnRSTlMAQBCgIDDAcGBQ79DwgJCw3+CkjUt9AAACqUlEQVRo3uzV266DIBRF0cVG7l5w/f/HntNGSRq1qK1JHxyvDZ2A24iDmiHnocGlTOS/aHClxKeECwkngusoThSKO3JHfiwiOnNQ5yJqYNaCqibyIZyJeD7EBjUDn6I5HjGRTxo1nGQ5GpHMye4I09FI4u5Iy5k+FtGcjahxLNzy1jlpKutqLIuwdc528UNgYVEnibNoNvbrVgZrlgQ7mPbNgo7/ujcbaw1q6kdvQmjeXbHCTo5Fjx16Fg67aRYNqhoWGgckzjyqPGcJR8jISYeqjpNRUBwasYCqUBms6kqLHey8n8N8+2gIdpBHpfU4QYIz2Mm4ILjdbr9PdGS2XTD4MuM7mxm1AJI5S7pTgi8Q1enEWRb0fBUHj4/4IfJVj8gFjQ9oLkRwhcdpnitguWRx1sbfqdX0aVyhVg+YcFrauHxxOl31TKx2gsKEzo7fnK5x6/0W5XqrFT6itO2dur/4f+2Zza7EIAiFqWL9qY6t7/+wN3dFTEAz4mIW/ZZNWgsGOHpeXl5efhn0y+0+2tMjzDEl0eBaGVipmOm/3DSCV0fvHWGEOzWy6KKXnZypj04WddLUCNGmThYp5VDi8n1crcPD15TWcR18poiq0KhSzmrryAWWKHlwPnCtwyIsgrZ1IBCezeWc6d56fpEcQEnI/CLI7dWceb0hI5NPhC3gyUr3/8WfCNuID3epbA4HElhsMfxjOXR3mK+7a4p8Gwqgh4ooGdZhawg7sHw381TVeozQzmpjIlQfNYtgNQTQUwXzKVKEalD03B4qay1etGs+0nxTzFQn+oEXKEH2S/p8yTmRM6njpr+Vo7xBxTHUeiftlwY7rLiw5UKRbijNsOMk0EBVPe4GWxaJEwMXNNSJjf9o94TsxhzHRmF2oAJtztWBiKs5TwXnH6uwZgJe+S0LAAAAAElFTkSuQmCC”
            />
            <p class=”text” id=”UploadPromptText”></p>
        </div>
        <script>
            /*
可以删掉用jquery代替
*/
            //判断是否具有指定样式类
            HTMLElement.prototype.hasClass = function(name) {
                var c = this.className.split(‘ ‘)
                for (var i = c.length – 1; i >= 0; i–) {
                    if (c[i].toLowerCase() == name.toLowerCase()) {
                        return true
                    }
                }
                return false
            }
            //添加样式类
            HTMLElement.prototype.addClass = function(name) {
                var list1 = name.split(‘ ‘)
                var list2 = this.className.split(‘ ‘)
                list1.forEach(function(item, i) {
                    var index = list2.indexOf(item)
                    if (index === -1) {
                        list2.push(item)
                    }
                })
                this.className = list2.join(‘ ‘)
                return this
            }
            //删除样式类
            HTMLElement.prototype.removeClass = function(name) {
                var list1 = name.split(‘ ‘)
                var list2 = this.className.split(‘ ‘)
                list1.forEach(function(item) {
                    var index = list2.indexOf(item)
                    if (index > -1) {
                        list2.splice(index, 1)
                    }
                })
                this.className = list2.join(‘ ‘)
                return this
            }
            //删除自己
            HTMLElement.prototype.remove = function() {
                this.parentNode.removeChild(this)
                return this
            }
            ;(function() {
                /*
解决安卓机上input file accept不为image/*时,不触发onchange事件
但是在PC上input file设置accept=”image/*”时,响应又非常慢
所以需要判断是移动端还是PC端
*/
                if (!IsPC()) {
                    ;[].forEach.call(
                        document.querySelectorAll(‘input[type=file]’),
                        function(item) {
                            item.setAttribute(‘accept’, ‘image/*’)
                        },
                    )
                }
                function IsPC() {
                    var userAgentInfo = navigator.userAgent
                    var Agents = [
                        ‘Android’,
                        ‘iPhone’,
                        ‘SymbianOS’,
                        ‘Windows Phone’,
                        ‘iPad’,
                        ‘iPod’,
                    ]
                    var flag = true
                    for (var v = 0; v < Agents.length; v++) {
                        if (userAgentInfo.indexOf(Agents[v]) > 0) {
                            flag = false
                            break
                        }
                    }
                    return flag
                }
                //压缩画布
                var CompressCanvas = document.createElement(‘canvas’)
                var CompressContext = CompressCanvas.getContext(‘2d’)
                //瓦片画布
                var TileCanvas = document.createElement(‘canvas’)
                var TileContext = TileCanvas.getContext(‘2d’)
                //文件最大大小
                var MaxSize = 200 * 1024
                //压缩率
                var CompressRatio = 0.5
                //图片列表
                var SelectImageList = {}
                //是否有图像正在压缩中
                var IsImageCompress = false
                //元素
                var $_FormWrap = document.querySelector(‘#FormWrap’)
                var $_UploadControl = document.querySelector(‘#UploadControl’)
                var $_UploadingImages = document.querySelector(
                    ‘#UploadingImages’,
                )
                var $_UploadingContainer = document.querySelector(
                    ‘#UploadingContainer’,
                )
                var $_UploadPrompt = document.querySelector(‘#UploadPrompt’)
                var $_UploadPromptText = document.querySelector(
                    ‘#UploadPromptText’,
                )
                //初始化
                //事件
                //预览图删除按钮事件
                $_UploadingContainer.addEventListener(‘click’, function() {
                    var s = this
                    var _this = isEventAgencyTarget.call(
                        $_UploadingContainer,
                        ‘i’,
                    )
                    if (_this) {
                        var _parent = _this.parentElement
                        var _id = _parent.getAttribute(‘data-id’)
                        SelectImageList[_id] && delete SelectImageList[_id]
                        _parent.parentElement.removeChild(_parent)
                    }
                })
                //判断给定选择器元素是否在事件冒泡路径中
                function isEventAgencyTarget(exp) {
                    var s = this
                    var target = null
                    var exp = arguments[0] || ”
                    var agencylist = [].slice.call(s.querySelectorAll(exp))
                    agencylist.forEach(function(item) {
                        if (window.event.path.indexOf(item) > -1) {
                            target = item
                        }
                    })
                    return target || false
                }
                //提交事件
                $_FormWrap.addEventListener(‘submit’, function(e) {
                    e.preventDefault()
                    if (IsImageCompress) {
                        alert(‘图像压缩中,请稍等片刻!’)
                        return false
                    }
                    //显示提示
                    document.body.addClass(‘notEvent’)
                    $_UploadPrompt.removeClass(‘hide’)
                    $_UploadPromptText.innerText = ‘提交中…’
                    //实例化
                    var formdata = getFormData()
                    //循环遍历表单元素并填入FormData
                    ;[].forEach.call($_FormWrap, function(item) {
                        var name = item.getAttribute(‘name’)
                        name && formdata.append(name, item.value)
                    })
                    //循环遍历待上传图片二进制数据并填入FormData
                    var list = Object.keys(SelectImageList)
                    list.forEach(function(item, i) {
                        formdata.append(
                            ‘upload_’ + i,
                            SelectImageList[item].data,
                            SelectImageList[item].name,
                        )
                    })
                    formdata.append(‘upload_length’, list.length)
                    //提交
                    var xhr = new XMLHttpRequest()
                    xhr.open(
                        $_FormWrap.getAttribute(‘method’),
                        $_FormWrap.getAttribute(‘action’),
                    )
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            /*上传成功*/
                            location.reload()
                            alert(‘提交成功!’)
                            document.body.removeClass(‘notEvent’)
                            $_UploadPrompt.addClass(‘hide’)
                        }
                    }
                    xhr.onerror = function() {
                        alert(‘提交失败,请稍后再试!’)
                    }
                    //数据发送进度
                    xhr.upload.addEventListener(
                        ‘progress’,
                        function(e) {
                            pecent = ~~((100 * e.loaded) / e.total)
                            $_UploadPromptText.innerText =
                                ‘上传进度(’ + pecent + ‘%)’
                        },
                        false,
                    )
                    xhr.send(formdata)
                    return false
                })
                //选择文件事件
                $_UploadControl.addEventListener(‘change’, function() {
                    if (!this.files.length) return
                    var index = 0
                    var Fragment = document.createDocumentFragment()
                    //文件列表
                    var files = Array.prototype.slice.call(this.files)
                    //标记图像压缩中
                    IsImageCompress = true
                    //遍历文件列表
                    files.forEach(function(file, i) {
                        if (!/(jpeg|png|gif)/i.test(file.type)) return
                        var img = new Image()
                        //创建dom
                        var li = document.createElement(‘li’)
                        li.innerHTML = ‘<i>X</i>’
                        li.setAttribute(‘data-load’, 1)
                        Fragment.appendChild(li)
                        //初始化
                        var reader = new FileReader()
                        reader.onload = function() {
                            var result = this.result
                            img.src = result
                            //如果图片大小小于200kb,则不进行处理
                            if (result.length <= MaxSize) {
                                li.setAttribute(‘data-load’, 0)
                                li.setAttribute(‘data-id’, Date.now())
                                li.style.backgroundImage =
                                    ‘url(“‘ + result + ‘”)’
                                SelectImageList[li.getAttribute(‘data-id’)] = {
                                    name: file.name,
                                    data: data64toBinary(result, file.type),
                                }
                                if (++index === files.length) {
                                    IsImageCompress = false
                                }
                            } else {
                                //图片加载完毕之后进行压缩
                                img.onload = function() {
                                    var data = ImageCompress(this)
                                    li.setAttribute(‘data-load’, 0)
                                    li.setAttribute(‘data-id’, Date.now())
                                    li.style.backgroundImage =
                                        ‘url(“‘ + data + ‘”)’
                                    SelectImageList[
                                        li.getAttribute(‘data-id’)
                                    ] = {
                                        name: file.name,
                                        data: data64toBinary(data, file.type),
                                    }
                                    if (++index === files.length) {
                                        IsImageCompress = false
                                    }
                                }
                            }
                        }
                        reader.readAsDataURL(file)
                    })
                    $_UploadingContainer.appendChild(Fragment)
                    $_UploadControl.value = ”
                })
                //使用canvas对大图片进行压缩
                function ImageCompress(img) {
                    var width = img.width
                    var height = img.height
                    var initSize = img.src.length
                    //如果图片大于四百万像素,计算压缩比并将大小压至400万以下
                    var ratio = (width * height) / 4000000
                    if (ratio > 1) {
                        ratio = Math.sqrt(ratio)
                        width /= ratio
                        height /= ratio
                    } else {
                        ratio = 1
                    }
                    CompressCanvas.width = width
                    CompressCanvas.height = height
                    //绘制底色
                    CompressContext.fillStyle = ‘#fff’
                    CompressContext.fillRect(0, 0, width, height)
                    //如果图片像素大于100万则使用瓦片绘制
                    var count = (width * height) / 1000000
                    if (count > 1) {
                        //计算要分成多少块瓦片
                        count = ~~(Math.sqrt(count) + 1)
                        //计算每块瓦片的宽和高
                        var nw = ~~(width / count)
                        var nh = ~~(height / count)
                        TileCanvas.width = nw
                        TileCanvas.height = nh
                        for (var i = 0; i < count; i++) {
                            for (var j = 0; j < count; j++) {
                                TileContext.drawImage(
                                    img,
                                    i * nw * ratio,
                                    j * nh * ratio,
                                    nw * ratio,
                                    nh * ratio,
                                    0,
                                    0,
                                    nw,
                                    nh,
                                )
                                CompressContext.drawImage(
                                    TileCanvas,
                                    i * nw,
                                    j * nh,
                                    nw,
                                    nh,
                                )
                            }
                        }
                    } else {
                        CompressContext.drawImage(img, 0, 0, width, height)
                    }
                    //进行最小压缩
                    var ndata = CompressCanvas.toDataURL(
                        ‘image/jpeg’,
                        CompressRatio,
                    )
                    CompressCanvas.width = CompressCanvas.height = TileCanvas.width = TileCanvas.height = 0
                    return ndata
                }
                //data64转二进制
                function data64toBinary(basestr, type) {
                    var text = window.atob(basestr.split(‘,’)[1])
                    var buffer = new Uint8Array(text.length)
                    var pecent = 0,
                        loop = null
                    for (var i = 0; i < text.length; i++) {
                        buffer[i] = text.charCodeAt(i)
                    }
                    return getBlob([buffer], type)
                }
                /**
                 * 获取blob对象的兼容性写法
                 * @param buffer
                 * @param format
                 * @returns {*}
                 */
                function getBlob(buffer, format) {
                    try {
                        return new Blob(buffer, { type: format })
                    } catch (e) {
                        var bb = new (window.BlobBuilder ||
                            window.WebKitBlobBuilder ||
                            window.MSBlobBuilder)()
                        buffer.forEach(function(buf) {
                            bb.append(buf)
                        })
                        return bb.getBlob(format)
                    }
                }
                /**
                 * 获取formdata
                 */
                function getFormData() {
                    var isNeedShim =
                        ~navigator.userAgent.indexOf(‘Android’) &&
                        ~navigator.vendor.indexOf(‘Google’) &&
                        !~navigator.userAgent.indexOf(‘Chrome’) &&
                        navigator.userAgent.match(/AppleWebKit\/(\d+)/).pop() <=
                            534
                    return isNeedShim ? new FormDataShim() : new FormData()
                }
                /**
                 * formdata 补丁, 给不支持formdata上传blob的android机打补丁
                 * @constructor
                 */
                function FormDataShim() {
                    console.warn(‘using formdata shim’)
                    var o = this,
                        parts = [],
                        boundary =
                            Array(21).join(‘-‘) +
                            (+new Date() * (1e16 * Math.random())).toString(36),
                        oldSend = XMLHttpRequest.prototype.send
                    this.append = function(name, value, filename) {
                        parts.push(
                            ‘–‘ +
                                boundary +
                                ‘\r\nContent-Disposition: form-data; name=”‘ +
                                name +
                                ‘”‘,
                        )
                        if (value instanceof Blob) {
                            parts.push(
                                ‘; filename=”‘ +
                                    (filename || ‘blob’) +
                                    ‘”\r\nContent-Type: ‘ +
                                    value.type +
                                    ‘\r\n\r\n’,
                            )
                            parts.push(value)
                        } else {
                            parts.push(‘\r\n\r\n’ + value)
                        }
                        parts.push(‘\r\n’)
                    }
                    // Override XHR send()
                    XMLHttpRequest.prototype.send = function(val) {
                        var fr,
                            data,
                            oXHR = this
                        if (val === o) {
                            // Append the final boundary string
                            parts.push(‘–‘ + boundary + ‘–\r\n’)
                            // Create the blob
                            data = getBlob(parts)
                            // Set up and read the blob into an array to be sent
                            fr = new FileReader()
                            fr.onload = function() {
                                oldSend.call(oXHR, fr.result)
                            }
                            fr.onerror = function(err) {
                                throw err
                            }
                            fr.readAsArrayBuffer(data)
                            // Set the multipart content type and boudary
                            this.setRequestHeader(
                                ‘Content-Type’,
                                ‘multipart/form-data; boundary=’ + boundary,
                            )
                            XMLHttpRequest.prototype.send = oldSend
                        } else {
                            oldSend.call(this, val)
                        }
                    }
                }
            })()
        </script>
    </body>
</html>
后台开发好还是前端开发好
前端后台开发
后台开发 前端开发
» 本文来自:前端开发者 » 《前端上传图片压缩预览上传进度例子》
» 本文链接地址:https://www.rokub.com/8066.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!