Home > Developer > Web Develop
Most of the applications on the page have such a function of setting the avatar in the personal information management, and the premise of realizing this function is uploading the avatar, and the preview is the precondition of all subsequent actions when the upload is complete. In the online Barnabas, and then tidied up a bit, pieced together a small demo for everyone to learn. This blog from the blogger Park, the author Red, contact email [email protected], reproduced please keep the original link http://www.cnblogs.com/itred/p/5723864.html this article.
This demo basically can be implemented on the page to open the page, click Upload Avatar Image button, after the selection, upload successfully can be in the page specified location display just confirm upload completed pictures, the size of this picture is by default, for the page style, such as the size of the picture can be adjusted according to their own actual application, the most important thing is that the function is basically available, and compatible with multiple browsers, there will be no browser incompatibility problems, if there is no browser detection, please point out, in order to further optimize, thank you here.
Talk about the development environment, I use idea to complete, but this demo does not rely on the development environment, is actually a HTML and a default picture, in fact, is the most basic JS implementation. Therefore, the average person can understand, and can further expand.
1.style style settings:
<title> image upload local preview </title><style type= "Text/css" > #preview{ width: 180px; height: 183px; Border: 1px solid Gray; Overflow: hidden; } #imghead{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader ( Sizingmethod=image); } </style>2. Core javascript:
<script type= "Text/javascript" >functionpreviewimage (file) {varMAXWIDTH = 180; varMaxHeight = 180; vardiv = document.getElementById (' preview '); if(File.files && File.files[0]) {div.innerhtml= ' '; varimg = document.getElementById (' Imghead '); Img.onload=function () { varRect =Clacimgzoomparam (MAXWIDTH, MaxHeight, Img.offsetwidth, img.offsetheight); Img.width=Rect.width; Img.height=Rect.height; Img.style.marginLeft= rect.left+ ' px '; Img.style.marginTop= rect.top + ' px '; } varReader =NewFileReader (); Reader.onload=function(evt) {img.src=Evt.target.result; } reader.readasdataurl (file.files[0]); }Else{//compatible with IE varSfilter= ' Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingmethod=scale,src= "'; File.select (); varsrc =Document.selection.createRange (). text; Div.innerhtml= ' '; varimg = document.getElementById (' Imghead '); Img.filters.item (' DXImageTransform.Microsoft.AlphaImageLoader '). src =src; varRect =Clacimgzoomparam (MAXWIDTH, MaxHeight, Img.offsetwidth, img.offsetheight); Status= (' rect: ' +rect.top+ ', ' +rect.left+ ', ' +rect.width+ ', ' +rect.height); Div.innerhtml= "<div id=divhead style= ' width:" +rect.width+ "Px;height:" +rect.height+ "Px;margin-top:" +rect.top+ "PX;" +sfilter+src+ "\" ></div> "; } } functionClacimgzoomparam (MaxWidth, maxheight, width, height) {varparam = {top:0, left:0, Width:width, height:height}; if(Width>maxwidth | | height>maxheight) {Ratewidth= width/MaxWidth; Rateheight= height/MaxHeight; if(Ratewidth >rateheight) {Param.width=MaxWidth; Param.height= Math.Round (Height/ratewidth); }Else{param.width= Math.Round (Width/rateheight); Param.height=MaxHeight; }} param.left= Math.Round ((maxwidth-param.width)/2); Param.top= Math.Round ((maxheight-param.height)/2); returnparam; }</script>
3. The body layout is as follows:
<Body><DivID= "Preview"> <imgID= "Imghead"Border=0src= "Img/head_180.jpg"width= " the"Height= " the" /></Div><inputtype= "File"onchange= "Previewimage (this)" /></Body>
Basically it's done. Demo Source download Please click on me, the effect of the following:
Red Blog:http://itred.cnblogs.com
GitHub:https://github.com/itRed
Copyright NOTICE: This article is copyright to the author and the blog Park is shared, welcome reprint, but without the author's consent must retain this paragraph of instructions,
And in the article obvious position to give the original link, otherwise reserves the right to pursue legal responsibility.
Preview the page as soon as you upload it
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
