JS Image Upload Preview

Source: Internet
Author: User

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>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.