Home >
Web Front-end >
JS Tutorial >
Javascript implements the effect of uploading pictures and previewing code_javascript skills
Javascript implements the effect of uploading pictures and previewing code_javascript skills
WBOY
Release: 2016-05-16 18:07:52
Original
1416 people have browsed it
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.
<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 width='" image.width "' height='" image.height "' id='apic' src='" picpath "'>"; <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>
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn