Html5 FileReader provides the example code for instantly uploading images,
This article mainly introduces Html5 FileReader to implement the function of uploading images in real time, because the project only requires ie9 or above, so ie8 is not written, for more information, see the preview under ie9, which is different from ie8. However, it seems that ie8 also uses fiter, because the project only requires ie9 or above, no ie8 is written.
The Code is as follows:
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> Document </title>
</Head>
<Body>
<P> <style type = "text/css">
# 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, and has no other purposes */
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;
}
</Style> <script type = "text/javascript">
Function onUploadImgChange (sender ){
If (! Sender. value. match (/. jpg |. gif |. png |. bmp/I )){
Alert ('image format is invalid! ');
Return false;
}
Var objPreview = document. getElementById ('preview ');
Var objPreviewFake = document. getElementById ('preview _ fak ');
Var objPreviewSizeFake = document. getElementById ('preview _ size_fake ');
If (sender. files & sender. files [0]) {// chrome and ff are compatible.
ObjPreview. style. display = 'block ';
ObjPreview. style. width = 'auto ';
ObjPreview. style. height = 'auto ';
// Firefox cannot directly obtain the complete file path through input [file]. value due to security issues
ObjPreview. src = sender. files [0]. getAsDataURL ();
} Else if (objPreviewFake. filters ){
// IE7 and IE8 may cause inexplicable consequences when setting the local image address to img. src
// (The same environment can be sometimes displayed, sometimes not displayed), so you can only use a filter to solve the problem.
// IE7 and IE8 cannot directly obtain the complete file path through input [file]. value due to security issues
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 ("image 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;
}
</Script> <input name = "localfile" type = "file" id = "localfile" size = "28" onchange = "onUploadImgChange (this)"/> <! -- The following is used to preview an image -->
<Div id = "kk">
<Div id = "preview_wrapper">
<Div id = "preview_fake">
</Div>
</Div>
<Br/>
</Div> </p>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
