Home > Developer > Web Develop
How do you do it this time? Change your avatar with code
In the previous blog also said the image upload, but after the selection of files, on the page does not show this picture, if you want to make a picture, it is best to have a picture preview
As usual we change QQ avatar, a little picture will come out of the file preview, and then select a picture, click, the page will be replaced by the picture you just clicked
Let's take a look at the first page.
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title><styletype= "Text/css">#yl{width:200px;Height:300px;Background-image:URL (file/20170112113928n2.png);background-size:200px 300px;This is the path to the background map, so don't forget to quote it.#file{width:200px;Height:300px;float: Left;Opacity:0;}<!--make the button size as large as the background image above, set the button to transparent --</style></Head><Body><formID= "SC"Action= "yulan2.php"Method= "POST"enctype= "Multipart/form-data"Target= "Shangchuan"> <inputtype= "hidden"name= "TP"value=""ID= "TP" /> <DivID= "YL"> <inputtype= "File"name= "File"ID= "File"onchange= "document.getElementById (' SC '). Submit ()" /> <!--Form form , submitted in the IFRAME, the target property browser open mode, processing the page is run to the IFRAME, after that sentence is selected, submitted by the Submit method - </Div> </form><iframestyle= "Display:none"name= "Shangchuan"ID= "Shangchuan"> <!--Hidden away -</iframe></Body><Scripttype= "Text/javascript">//callback function, call the method to pass a file path, the variable background mapfunctionshowimg (URL) {varDiv=document.getElementById ("yl"); Div.style.backgroundImage= "URL ("+URL+")"; document.getElementById ("TP"). Value=URL;}</Script></HTML>
After running
Click image
It's going to pop up. File Upload window
Take a look at the second page
<?PHPif($_files["File"] ["Error"]){ Echo $_files["File"] ["Error"];}Else{ if(($_files["File"] ["Type"]== "Image/jpeg" | |$_files["File"] ["Type"]== "Image/png") &&$_files["File"] ["Size"]<1024000) { $fname= "./img/".Date("Ymdhis").$_files["File"] ["Name"];//Build an img file under the same path, and the uploaded file will be saved in this folder . $filename=Iconv("UTF-8", "gb2312",$fname); if(file_exists($filename)) { Echo"<script>alert (' the file already exists! ');</script> "; } Else { Move_uploaded_file($_files["File"] ["Tmp_name"],$filename); unlink($_post["TP"]);//Delete the original file Echo"<script>parent.showimg (' {$fname} ');</script> "; } }}
Can look at the effect of running
Click on any one of the pictures
Avatar successfully replaced
Look again at IMG, folder
Have this picture, and then change the avatar once
Change it to this, and then look at the IMG folder
The original file is deleted, only the current file is saved, so that it can avoid the use of more memory
File upload-------Avatar upload preview
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
