How to realize the function of uploading pictures in real time by Html5 FileReader
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
}
