Detailed explanation of PHP avatar upload preview example
This article mainly introduces the detailed example of PHP avatar upload preview. Interested friends can refer to it. I hope it will be helpful to everyone.
Speaking of uploading pictures, everyone is familiar with it. However, in future projects, you may not be allowed to upload pictures using the submit refresh page method. For example, uploading avatars, according to common sense, must be in the photo album. After selecting the photo, confirm the upload, and it will definitely not be uploaded through the form, click submit to refresh the upload. I will introduce to you two types of asynchronous non-refresh uploading of pictures. Picture preview: The first one is uploaded through the ready-made uploadfy plug-in. There are many examples on the Internet.
But what I will focus on introducing to you is the second method, uploading images through Ajax. Because using the uploadfy plug-in requires the device to support Flash in swf format, the first method cannot be used for most mobile phones. First, let me tell you about the uploading principle: control the file text field through js. After selecting the photo, submit the form asynchronously through Ajax, then use the position of the picture as the return value, and use js to set the src attribute of the img as the return value. .
Upload avatar area:
Code:
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src="bootstrap-3.3.7-dist/js/jquery-1.11.2.min.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <style type="text/css"> #yl{ width:200px; height:200px; background-image:url(img/avatar.png); background-size:200px 200px;} #file{ width:200px; height:200px; float:left; opacity:0;} .modal-content{ width:500px;} .kk{ margin-left:130px;} </style> </head> <body> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 上传头像 </button> <!-- 模态框(Modal) --> <p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <p class="modal-dialog"> <p class="modal-content"> <p class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 上传头像 </h4> </p> <p class="modal-body"> <form id="sc" action="upload.php" method="post" enctype="multipart/form-data" target="shangchuan"> <input type="hidden" name="tp" value="" id="tp" /> <p id="yl" class="kk"> <input type="file" name="file" id="file" onchange="document.getElementById('sc').submit()" /> </p> </form> <iframe style="display:none" name="shangchuan" id="shangchuan"> </iframe> </p> <p class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button> <!--<button type="button" class="btn btn-primary"> 提交更改 </button>--> </p> </p><!-- /.modal-content --> </p><!-- /.modal --> </p> </body> <script type="text/javascript"> //回调函数,调用该方法传一个文件路径,该变背景图 function showimg(url) { var p = document.getElementById("yl"); p.style.backgroundImage = "url("+url+")"; document.getElementById("tp").value = url; } </script> </html>
Upload processing page:
<?php if($_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('该文件已存在!');</script>"; } else { move_uploaded_file($_FILES["file"]["tmp_name"],$filename); unlink($_POST["tp"]); echo "<script>parent.showimg('{$fname}');</script>"; } } }
Principle:
Put the file temporarily into the tmp directory in the wamp folder through the enctype="multipart/form-data" attribute of the form form, and then pass it through the background The php program saves the file in the system.
The above is the entire content of this article, I hope it will be helpful to everyone's study.
Related recommendations:
jQuery PHPStar rating implementation method_jquery
jQuery PHP Implement editable table field content and save it in real time_jquery
PHP MySQL jQuery Drag the layer at will and save the dragging position instantly_jquery
The above is the detailed content of Detailed explanation of PHP avatar upload preview example. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

PHP 8.4 brings several new features, security improvements, and performance improvements with healthy amounts of feature deprecations and removals. This guide explains how to install PHP 8.4 or upgrade to PHP 8.4 on Ubuntu, Debian, or their derivati

If you are an experienced PHP developer, you might have the feeling that you’ve been there and done that already.You have developed a significant number of applications, debugged millions of lines of code, and tweaked a bunch of scripts to achieve op

Visual Studio Code, also known as VS Code, is a free source code editor — or integrated development environment (IDE) — available for all major operating systems. With a large collection of extensions for many programming languages, VS Code can be c

JWT is an open standard based on JSON, used to securely transmit information between parties, mainly for identity authentication and information exchange. 1. JWT consists of three parts: Header, Payload and Signature. 2. The working principle of JWT includes three steps: generating JWT, verifying JWT and parsing Payload. 3. When using JWT for authentication in PHP, JWT can be generated and verified, and user role and permission information can be included in advanced usage. 4. Common errors include signature verification failure, token expiration, and payload oversized. Debugging skills include using debugging tools and logging. 5. Performance optimization and best practices include using appropriate signature algorithms, setting validity periods reasonably,

A string is a sequence of characters, including letters, numbers, and symbols. This tutorial will learn how to calculate the number of vowels in a given string in PHP using different methods. The vowels in English are a, e, i, o, u, and they can be uppercase or lowercase. What is a vowel? Vowels are alphabetic characters that represent a specific pronunciation. There are five vowels in English, including uppercase and lowercase: a, e, i, o, u Example 1 Input: String = "Tutorialspoint" Output: 6 explain The vowels in the string "Tutorialspoint" are u, o, i, a, o, i. There are 6 yuan in total

This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an

Static binding (static::) implements late static binding (LSB) in PHP, allowing calling classes to be referenced in static contexts rather than defining classes. 1) The parsing process is performed at runtime, 2) Look up the call class in the inheritance relationship, 3) It may bring performance overhead.

What are the magic methods of PHP? PHP's magic methods include: 1.\_\_construct, used to initialize objects; 2.\_\_destruct, used to clean up resources; 3.\_\_call, handle non-existent method calls; 4.\_\_get, implement dynamic attribute access; 5.\_\_set, implement dynamic attribute settings. These methods are automatically called in certain situations, improving code flexibility and efficiency.
