Php Avatar upload preview and php Avatar Preview
Php Avatar upload with preview:
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
The position of the slice is used as the return value. js is used 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.