Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how Html5 FileReader can upload pictures instantly. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

The code is as follows:

Document

# kk {

Width:400px

Height:400px

Overflow: hidden

}

# preview_wrapper {

Width:300px

Height:300px

Background-color:#CCC

Overflow: hidden

}

# preview_fake {/ * this object is used to display preview images under IE * /

Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=scale)

Width:300px

Overflow: hidden

}

# preview_size_fake {/ * this object is only used to obtain the original size of the image under IE, for no other purpose * /

Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=image)

Width:300px

Visibility:hidden

Overflow: hidden

}

# preview {/ * this object is used to display preview images under FF * /

Width:300px

Height:300px

Overflow: hidden

}

Function onUploadImgChange (sender) {

If (! sender.value.match (/ .jpg | .gif | .png | .bmp / I)) {

Alert ('invalid picture format!')

Return false

}

Var objPreview = document.getElementById ('preview')

Var objPreviewFake = document.getElementById ('preview_fake')

Var objPreviewSizeFake = document.getElementById ('preview_size_fake')

If (sender.files & & sender.files [0]) {/ / this is where chrome and ff are compatible.

ObjPreview.style.display = 'block'

ObjPreview.style.width = 'auto'

ObjPreview.style.height = 'auto'

/ / Firefox cannot obtain the complete file path directly through input [file] .value due to security problems.

ObjPreview.src = sender.files [0] .getAsDataURL ()

} else if (objPreviewFake.filters) {

/ / IE7,IE8 has an inexplicable consequence when setting the local image address to img.src.

/ / (sometimes the same environment can be displayed, sometimes not), so it can only be solved with a filter.

/ / IE7. Due to security problems, IE8 can no longer obtain the complete file path directly through input [file] .value

Sender.select ()

Sender.blur ()

Var imgSrc = document.selection.createRange () .text

ObjPreviewFake.filters.item ('DXImageTransform.Microsoft.AlphaImageLoader'). Src = imgSrc

ObjPreviewSizeFake.filters.item ('DXImageTransform.Microsoft.AlphaImageLoader'). Src = imgSrc

Alert ("Picture selected successfully!")

Alert (objPreviewSizeFake.offsetWidth)

AutoSizePreview (objPreviewFake,objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight)

ObjPreview.style.display = 'none'

}

}

Function onPreviewLoad (sender) {

AutoSizePreview (sender, sender.offsetWidth, sender.offsetHeight)

}

Function autoSizePreview (objPre, originalWidth, originalHeight) {

Var zoomParam = clacImgZoomParam (300,300, originalWidth, originalHeight)

ObjPre.style.width = zoomParam.width + 'px'

ObjPre.style.height = zoomParam.height + 'px'

ObjPre.style.marginTop = zoomParam.top + 'px'

ObjPre.style.marginLeft = zoomParam.left + 'px'

}

Function clacImgZoomParam (maxWidth, maxHeight, width, height) {

Var param = {width:width, height:height, top:0, left:0}

If (width > maxWidth | | height > maxHeight) {

RateWidth = width / maxWidth

RateHeight = height / maxHeight

If (rateWidth > rateHeight) {

Param.width = maxWidth

Param.height = height / rateWidth

} else {

Param.width = width / rateHeight

Param.height = maxHeight

}

}

Param.left = (maxWidth-param.width) / 2

Param.top = (maxHeight-param.height) / 2

Return param

}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.