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

女生学前端好还是后台开发

web前端和后台开发

前端，后台开发必备技能

html 代码

<html>

<head>

<meta

name=”viewport”

content=”width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=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,

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”

<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>

</form>

<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”

</div>

可以删掉用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,

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>

后台开发好还是前端开发好

前端后台开发

后台开发前端开发

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

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发