찾다
백엔드 개발PHP 튜토리얼PHP 아바타 업로드 미리보기 예시에 대한 자세한 설명

이 글은 주로 PHP 아바타 업로드 미리보기 예시에 대한 자세한 설명을 소개하고 있으니 관심 있는 분들이 참고하시면 좋을 것 같습니다.

사진 업로드는 다들 익숙하시겠지만, 향후 프로젝트에서는 아바타 업로드 등 페이지 새로고침 방식을 사용하여 사진을 업로드하지 못할 수도 있습니다. 업로드를 확인하면 양식을 통해 업로드되지 않습니다. 업로드를 새로 고치려면 제출을 클릭하세요. 두 개의 비동기 비새로고침 업로드 사진 + 사진 미리보기를 소개하겠습니다. 첫 번째는 이미 만들어진 uploadfy 플러그인을 통해 업로드하는 것입니다. 인터넷에는 많은 예가 있습니다.

하지만 제가 중점적으로 소개해드릴 것은 두 번째 방법인 Ajax를 통해 이미지를 업로드하는 방법입니다. uploadfy 플러그인을 사용하려면 장치가 swf 형식의 Flash를 지원해야 하기 때문에 첫 번째 방법은 대부분의 휴대폰에서 사용할 수 없습니다. 먼저 업로드 원칙에 대해 설명하겠습니다. js를 통해 파일 텍스트 필드를 제어합니다. 사진을 선택한 후 Ajax를 통해 비동기적으로 양식을 제출한 다음 사진의 위치를 ​​반환 값으로 사용하고 js를 사용하여 src를 설정합니다. img의 속성을 반환 값으로 사용합니다.

업로드 아바타 영역:

코드:


<!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(&#39;sc&#39;).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>


업로드 처리 페이지:


<?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(&#39;该文件已存在!&#39;);</script>";
    }
    else
    {
      move_uploaded_file($_FILES["file"]["tmp_name"],$filename);
      
      unlink($_POST["tp"]);
      
      echo "<script>parent.showimg(&#39;{$fname}&#39;);</script>";
    }
    
  }
}


원칙:

enctype="multi form -data 형식의 부분/양식" " 속성은 파일을 wamp 폴더의 tmp 디렉터리에 임시로 저장한 후 백그라운드 PHP 프로그램을 통해 시스템에 파일을 저장합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.


관련 추천:

PHP+jQuery+Ajax+Mysql 기분 표현 구현 방법 function_javascript 기술

js은 php_javascript 기술의 strtotime() 및 date() 함수를 모방합니다

JavaScript를 사용하여 PHP의 urlencode 및 urldecode 기능 구현_javascript 기술


위 내용은 PHP 아바타 업로드 미리보기 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
PHP 세션에 저장된 데이터를 어떻게 수정합니까?PHP 세션에 저장된 데이터를 어떻게 수정합니까?Apr 27, 2025 am 12:23 AM

tomodifyDatainAphPessess, startSessionstession_start (), 그런 다음 $ _sessionToset, modify, orremovevariables.

PHP 세션에 배열을 저장하는 예를 제시하십시오.PHP 세션에 배열을 저장하는 예를 제시하십시오.Apr 27, 2025 am 12:20 AM

배열은 PHP 세션에 저장할 수 있습니다. 1. 세션을 시작하고 session_start ()를 사용하십시오. 2. 배열을 만들고 $ _session에 저장하십시오. 3. $ _session을 통해 배열을 검색하십시오. 4. 세션 데이터를 최적화하여 성능을 향상시킵니다.

Garbage Collection은 PHP 세션에 어떻게 효과가 있습니까?Garbage Collection은 PHP 세션에 어떻게 효과가 있습니까?Apr 27, 2025 am 12:19 AM

PHP 세션 쓰레기 수집은 만료 된 세션 데이터를 정리하기위한 확률 메커니즘을 통해 트리거됩니다. 1) 구성 파일에서 트리거 확률 및 세션 수명주기를 설정합니다. 2) CRON 작업을 사용하여 고재 응용 프로그램을 최적화 할 수 있습니다. 3) 데이터 손실을 피하기 위해 쓰레기 수집 빈도 및 성능의 균형을 맞춰야합니다.

PHP에서 세션 활동을 어떻게 추적 할 수 있습니까?PHP에서 세션 활동을 어떻게 추적 할 수 있습니까?Apr 27, 2025 am 12:10 AM

PHP의 사용자 세션 활동 추적은 세션 관리를 통해 구현됩니다. 1) Session_start ()를 사용하여 세션을 시작하십시오. 2) $ _session 배열을 통해 데이터를 저장하고 액세스하십시오. 3) 세션 _destroy ()를 호출하여 세션을 종료합니다. 세션 추적은 사용자 행동 분석, 보안 모니터링 및 성능 최적화에 사용됩니다.

데이터베이스를 사용하여 PHP 세션 데이터를 저장할 수있는 방법은 무엇입니까?데이터베이스를 사용하여 PHP 세션 데이터를 저장할 수있는 방법은 무엇입니까?Apr 27, 2025 am 12:02 AM

데이터베이스를 사용하여 PHP 세션 데이터를 저장하면 성능 및 확장 성을 향상시킬 수 있습니다. 1) 세션 데이터를 저장하기 위해 MySQL 구성 : php.ini 또는 php 코드에서 세션 프로세서를 설정하십시오. 2) 사용자 정의 세션 프로세서 구현 : 데이터베이스와 상호 작용하기 위해 열린, 닫기, 읽기, 쓰기 및 기타 기능을 정의합니다. 3) 최적화 및 모범 사례 : 인덱싱, 캐싱, 데이터 압축 및 분산 스토리지를 사용하여 성능을 향상시킵니다.

PHP 세션의 개념을 간단한 용어로 설명하십시오.PHP 세션의 개념을 간단한 용어로 설명하십시오.Apr 26, 2025 am 12:09 AM

phpsessionstrackuserdataacrossmultiplepagerequestsususingauniqueIdStoredInAcookie.here'showtomanagetheMeftically : 1) STARTASESSIONSTART_START () andSTAREDATAIN $ _SESSION.2) RegenerATERATESSESSIDIDAFTERLOGINWITHSESSION_RATERATERATES (True) TopreventSES

PHP 세션에 저장된 모든 값을 어떻게 반복합니까?PHP 세션에 저장된 모든 값을 어떻게 반복합니까?Apr 26, 2025 am 12:06 AM

PHP에서 세션 데이터를 통한 반복은 다음 단계를 통해 달성 할 수 있습니다. 1. Session_start ()를 사용하여 세션을 시작하십시오. 2. $ _session 배열의 모든 키 값 쌍을 통해 Foreach 루프를 통과합니다. 3. 복잡한 데이터 구조를 처리 할 때 is_array () 또는 is_object () 함수를 사용하고 print_r ()를 사용하여 자세한 정보를 출력하십시오. 4. Traversal을 최적화 할 때 페이징을 사용하여 한 번에 많은 양의 데이터를 처리하지 않도록 할 수 있습니다. 이를 통해 실제 프로젝트에서 PHP 세션 데이터를보다 효율적으로 관리하고 사용하는 데 도움이됩니다.

사용자 인증에 세션을 사용하는 방법을 설명하십시오.사용자 인증에 세션을 사용하는 방법을 설명하십시오.Apr 26, 2025 am 12:04 AM

이 세션은 서버 측 상태 관리 메커니즘을 통해 사용자 인증을 인식합니다. 1) 세션 생성 및 고유 ID의 세션 생성, 2) ID는 쿠키를 통해 전달됩니다. 3) ID를 통해 서버 저장 및 세션 데이터에 액세스합니다. 4) 사용자 인증 및 상태 관리가 실현되어 응용 프로그램 보안 및 사용자 경험이 향상됩니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기