I have seen a picture upload and preview function written by a person before, except that the Picture preview made by others by using third-party JS class libraries is very depressing. Later I plan to write one by myself, it is written in pure JS, just like a virgin. Currently, it supports proportional scaling of IE6, IE7, IE8, and Firefox. The preview function of Chrome browser has not yet been implemented. It may not be well written. I hope you can help us to complete it.
The Code is as follows:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> image preview </title>
<Style type = "text/CSS">
. Preview_wrapper
{
Width: 300px;
Height: 300px;
Background-color: # CCC;
Display: inline-block;
}
. Preview
{
Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (sizingMethod = scale);/* set to ie */
}
# IdImg
{
Width: 300px;
Height: 300px;
}
. HelpImg
{
Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (sizingMethod = image);/* set to ie */
Visibility: hidden;
}
</Style>
<Script language = "javascript" type = "text/javascript">
/*************************************** ***************************
Create Datetime: 2010/10/07
Version: v1.0
Create Author: wulanzhou
Main Function: Used to preview image files and determine the file type.
Appliance range: ie6, ie7, ie8, firefox
Bug: cannot be previewed on chrome. Some problems have occurred in the implementation of remote functions, which have not been solved yet.
**************************************** ***************************/
Var ImagePreview = {
FileObject: null, // file object
ImgObject: null, // preview an img object
DivObject: null, // div object
HelpImgObj: null, // secondary img object
Options: {maxWidth: 300, maxHeight: 300}, // The allowed size of the preview image.
BrowerVesion: navigator. userAgent. toLowerCase (), // browser type
Trim: function (val) {// remove space
Return val. replace (/(^/s *) | (/s * $)/g ,"");
},
Fileformat: function () {// File Upload format judgment
If (this. fileObject = null) return false;
If (this. fileObject. value = "") {return false ;}
Var str = this. fileObject. value;
Var Temp = str. lastIndexOf (".");
If (Temp =-1 ){
Return false;
}
Var TempFile = str. substring (Temp + 1, str. length );
If (TempFile! = "Gif" & TempFile! = "Jpg" & TempFile! = "GIF" & TempFile! = "JPG" & TempFile! = "Bmp" & TempFile! = "BMP" & TempFile! = "JPEG" & TempFile! = "Jpeg" & TempFile! = "Png" & TempFile! = "PNG "){
Alert ("incorrect image file format. Please confirm again! ");
Return false;
}
},
GetObject: function (OBJ ){
Return document. getelementbyid (OBJ );
},
Mode: function (){
VaR nav = This. browervesion;
If (NAV. indexof ("MSIE 7 ")! =-1 | nav. indexof ("MSIE 8 ")! =-1)
Return "filter ";
Else if (nav. indexOf ("firefox ")! =-1)
Return "domfile ";
Else if (nav. indexOf ("msie 6 ")! =-1)
Return "simple ";
Else
Return "remote"; // function preview in this mode is not completed yet
},
GetMode: function (){
Switch (this. Mode ()){
Case "filter": return this. filterMode ();
Case "domfile": return this. domfileMode ();
Case "simple": return this. simpleMode ();
Case "remote": break;
}
},
FilterMode: function () {// Picture preview of ie 7 and ie 8
This. fileObject. select ();
// This. file. select ();
Try {return document. selection. createRange (). text ;}
Finally {document. selection. empty ();}
},
DomfileMode: function () {// firefox image Preview
Return this. fileObject. files [0]. getAsDataURL ();
},
RemoteMode: function () {// chrome operabrowser
},
SimpleMode: function () {// ie 6
Return this. fileObject. value;
},
PreviewImg: function () {// Preview
Var obj = this. getMode ();
If (this. browerVesion. indexOf ("msie ")! =-1 ){
This. divObject. filters. item ("DXImageTransform. Microsoft. AlphaImageLoader"). src = obj; // this parameter is set for ie7 and ie8.
Var helpimg = this. helpImgObj;
Helpimg. filters. item ('dximagetransform. Microsoft. AlphaImageLoader '). src = obj;
This. autoSizePreview (this. divObject, 300,300, helpimg. offsetWidth, helpimg. offsetHeight );
This. imgObject. style. display = "none ";
}
Else {
VaR S = This. imgobject;
S. style. Display = "Block ";
S. style. width = "Auto ";
S. style. Height = "Auto ";
S. src = OBJ;
}
},
Autosizepreview: function (objpre, maxwidth, maxheight, width, height) {// preview image proportional Scaling
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;
ObjPre. style. width = param. width + 'px ';
ObjPre. style. height = param. height + 'px ';
ObjPre. style. marginTop = param. top + 'px ';
Objpre. style. marginleft = Param. Left + 'px ';
},
// Buttonshow: function (){
// If (this. IMG. width = 0 | this. IMG. Height = 0)
// SetTimeout (this. buttonshow (), 1000 );
// Else
//{}
//},
ImgTransparent: function (){
Var nav = this. browerVesion;
If (nav. indexOf ("msie 6 ")! =-1 | nav. indexOf ("msie 7 ")! =-1 ){
Return "MHTML:" + document. scripts [document. scripts. Length-1]. getattribute ("src", 4) + "! Blankimage ";
}
Else
Return "data: image/GIF; base64, r0lgodlhaqabaiaaap // waaach5baeaaaaalaaaabaaeaaaicraeaow = ";
},
Loadimg: function (sender ){
Imagepreview. autosizepreview (sender, 300,300, Sender. offsetwidth, Sender. offsetheight );
}
};
</SCRIPT>
</Head>
<Body>
<! -- <Form ID = "form1" enctype = "multipart/form-Data"> -->
<Table width = "100%" cellpadding = "6" cellspacing = "1">
<Tr>
<TD>
<Div class = "preview_wrapper">
<Div class = "preview">
</Div>
</Div> <br/>
<Input type = "file" id = "idFile" onchange = "preview (this)"/>
</Td>
<Td>
</Td>
</Tr>
</Table>
<Script language = "javascript" type = "text/javascript">
Document. getElementById ("idImg"). src = ImagePreview. ImgTransparent (); // this parameter is set for ie of zookeeper. If this parameter is not set, a cross image is generated by default.
Function preview (obj ){
ImagePreview. fileObject = obj;
Var parentObj = obj. parentNode;
Var imgObj = parentObj. getElementsByTagName ("img") [0];
ImagePreview. helpImgObj = parentObj. getElementsByTagName ("img") [1];
ImagePreview. imgObject = imgObj;
ImagePreview. divObject = imgObj. parentNode;
If (ImagePreview. fileformat () = false) return false;
ImagePreview. previewImg (); // Preview
}
</Script>
<! -- </Form> -->
</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
