Php Avatar upload preview instance code, php Avatar preview instance
It is no stranger to everyone to upload images. However, in future projects, you may not be asked to submit and refresh images on pages, such as uploading portraits, you must confirm the upload after selecting the photo album. Instead of using the form, click submit to refresh the upload. I will introduce two types of asynchronous non-Refresh upload images + image preview: first, upload using the ready-made uploadfy plug-in, there are many instances on the Internet.
However, I will focus on the second method: upload images through Ajax. Because the uploadfy plug-in requires devices to support Flash in swf format, most mobile phones cannot use the first method. First, let me talk about the upload principle: control the file text field through js. After selecting a photo, submit the form asynchronously through Ajax, and then use the position of the image as the return value, use js to set the src attribute of img as the return value.
Upload Avatar area:
Code:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Upload processing page:
<? Phpif ($ _ FILES ["file"] ["error"]) {echo $ _ FILES ["file"] ["error"];} else {if ($ _ FILES ["file"] ["type"] = "image/jpeg" | $ _ FILES ["file"] ["type"] = "image/png ") & $ _ FILES ["file"] ["size"] <1024000000) {$ fname = ". /img /". date ("YmdHis "). $ _ FILES ["file"] ["name"]; $ 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"]); echo "<script> parent. showimg ('{$ fname}'); </script> ";}}}
Principle:
Use the enctype = "multipart/form-data" attribute of form to temporarily place the file to the tmp directory in the wamp folder, and then store the file in the system through the background php program.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.