Javascript implements the effect of uploading pictures and previewing code_javascript skills

Today, the src attribute of the alphaimageloader filter is the protagonist. It uses an absolute or relative url address to specify the background image. If this parameter is omitted, the filter will have no effect.

Copy code The code is as follows:

Select picture:

Example 2. At the same time Compatible with ie6, ie7, ie8 and firefox.

Copy code The code is as follows:

BR>"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">



<script> <BR>var picpath; <BR>var image; <BR>// preview picture <BR>function preview() <BR>{ <BR>document.getelementbyid('preview').style.display = 'none'; <BR>// The following code is used to obtain the image size so that the image can be displayed normally under IE <BR>document.getelementbyid('box' ).innerhtml <BR>= "<img style="max-width:90%" image.width "' height='" image.height "' id='apic' src='" picpath "' alt="Javascript implements the effect of uploading pictures and previewing code_javascript skills" >"; <BR>} <BR>// show view button <BR>function buttonshow() <BR>{ <BR>/* <BR>This is used to solve the preview failure caused by image loading delay. <BR>A brief explanation, when the image object When the src attribute changes, JavaScript will reload the image content to the image. <BR>This usually takes some time. If you want to display the image before the loading is completed, it will cause an error, so we <BR>pass the width and width of the image. height to determine whether the image has been loaded successfully, and the preview button will be displayed only after the loading is completed. <BR>I still have a confusion here, the preview effect occasionally fails under IE7. <BR>*/ <BR>if ( image.width == 0 || image.height == 0 ) { <BR>settimeout(buttonshow, 1000); <BR>} else { <BR>document.getelementbyid('preview').style.display = 'block'; <BR>} <BR>} <BR>function loadimage(ele) { <BR>picpath = getpath(ele); <BR>image = new image(); <BR>image.src = picpath; <BR>settimeout( buttonshow, 1000); <BR>} <BR>function getpath(obj) <BR>{ <BR>if(obj) <BR>{ <BR>//ie <BR>if (window.navigator.useragent.indexof ("msie")>=1) <BR>{ <BR>obj.select(); <BR>// Get the local path of the image under ie <BR>return document.selection.createrange().text; <BR>} <BR>//firefox <BR>else if(window.navigator.useragent.indexof("firefox")>=1) <BR>{ <BR>if(obj.files) <BR>{ <BR>// What is obtained under firefox is the image data <BR>return obj.files.item(0).getasdataurl(); <BR>} <BR>return obj.value; <BR>} <BR>return obj .value; <BR>} <BR>} <BR></script>