The src with the alphaimageloader filter is the main character. It specifies the background image with an absolute or relative url address. If this parameter is ignored, the filter will not work.
Copy codeThe 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.3ppt.com/">
<Head>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/>
<Title> </title>
<Style type = "text/css tutorial">
# Picshow
{
Filter: progid: dximagetransform. microsoft. alphaimageloader (sizingmethod = scale );
Width: 88px;
Height: 125px;
}
</Style>
<Script type = "text/Webpage effects" language = "javascript">
<! --
Function upimg (imgfile)
{
Var picshow = document. getelementbyid ("picshow ");
Picshow. filters. item ("dximagetransform. microsoft. alphaimageloader"). src = imgfile. value;
Picshow. style. width = "88px ";
Picshow. style. height = "125px ";
}
-->
</Script>
</Head>
<Body>
<Div id = "picshow"> </div>
<P> select an image: <input type = "file" size = "20" onchange = "upimg (this);"/> </p>
</Body>
</Html>
Instance 2: compatible with ie6, ie7, ie8, and firefox.
Copy codeThe 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" xml: lang = "en" lang = "en">
<Head>
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/>
<Script>
Var picpath;
Var image;
// Preview picture
Function preview ()
{
Document. getelementbyid ('preview'). style. display = 'none ';
// The following code is used to obtain the image size so that the image can be normally displayed in ie.
Document. getelementbyid ('box'). innerhtml
= " ";
}
// Show view button
Function buttonshow ()
{
/*
This is used to solve preview failure caused by image loading delay.
For a brief description, when the src attribute of the image object changes, javascript will re-load the image content to the image,
This usually takes some time. If you want to display the image before loading, it will cause an error.
The preview button is displayed only after the image is loaded.
Here I am still confused. The preview effect in ie7 occasionally fails.
*/
If (image. width = 0 | image. height = 0 ){
Settimeout (FIG, 1000 );
} Else {
Document. getelementbyid ('preview'). style. display = 'block ';
}
}
Function loadimage (ele ){
Picpath = getpath (ele );
Image = new image ();
Image. src = picpath;
Settimeout (FIG, 1000 );
}
Function getpath (obj)
{
If (obj)
{
// Ie
If (window. navigator. useragent. indexof ("msie")> = 1)
{
Obj. select ();
// Obtain the local path of the image in ie
Return document. selection. createrange (). text;
}
// Firefox
Else if (window. navigator. useragent. indexof ("firefox")> = 1)
{
If (obj. files)
{
// The image data obtained in firefox
Return obj. files. item (0). getasdataurl ();
}
Return obj. value;
}
Return obj. value;
}
}
</Script>
</Head>
<Body>
<Input type = "file" name = "pic" id = "pic" onchange = 'loadimage (this) '/>
<Input id = 'preview' type = 'button 'value = 'preview' style = 'display: none; 'onclick = 'preview (); '>
<Div id = 'box'> </div>
</Body>
</Html>