PHP iFrame은 페이지 새로 고침_php 팁 없이 비동기 파일 업로드를 구현합니다.-PHP 튜토리얼-php.cn

PHP iFrame은 페이지 새로 고침_php 팁 없이 비동기 파일 업로드를 구현합니다.

WBOY

풀어 주다： 2016-05-16 20:36:08

원래의

1069명이 탐색했습니다.

이 기사의 예에서는 매우 실용적이고 일반적인 기술인 페이지 새로 고침 없이 비동기 파일 업로드를 수행하는 PHP iFrame 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

iframe에 대해 말하자면, 현재는 사용하는 사람이 점점 줄어들고 있으며 AJAX로 대체해야 한다고 생각하는 사람들이 많습니다. AJAX가 너무 좋기 때문입니다.

그러나 구현을 위해 여전히 iframe을 선택하는 상황이 있습니다. 이것은 이 기사에서 다루는 파일의 비동기 업로드에 관한 것입니다. 관심이 있다면 네이티브 AJAX를 사용하여 구현할 수 있습니다. 훨씬 더 복잡해져야 합니다.

먼저 초보자를 위한 기본 지식을 채워보겠습니다.

1. iframe 태그는 일반적으로 식별을 위해 이름 속성을 지정합니다. 2.
폼의 액션(대상 주소)과 대상(대상 창, 기본값은 _self)을 통해 제출 대상을 결정합니다. 3. 양식의 대상을 iframe 이름으로 지정하면 양식이 숨겨진 프레임 iframe에 제출될 수 있습니다.
4. iframe의 콘텐츠는 실제로 페이지이고 js의 상위 개체는 상위 페이지, 즉 iframe이 포함된 페이지를 참조합니다.
5. PHP에서 move_uploaded_file() 함수를 사용하여 파일 업로드를 구현합니다. $_FILES 배열은 업로드된 파일과 관련된 정보를 저장합니다.

이 글에서 구현한 것은 사용자가 아바타 파일을 선택하고 즉시 업로드하여 페이지에 표시하는 예입니다.

1. 양식에 iframe을 삽입하고 이름 속성 값을 설정합니다.

2. 파일 업로드 선택 컨트롤 값이 변경되면 js 함수가 트리거됩니다. 이 함수는 iframe에 양식을 제출하고 iframe에 포함된 페이지를 사용하여 파일 업로드를 처리합니다. 3. iframe에서 파일 업로드가 완료된 후, js의 parent를 통해 상위 페이지를 조작하고, 특정 태그에 이미지를 표시하고, 숨겨진 필드에 이미지의 저장 주소를 할당합니다.
4. 원본 페이지로 돌아갑니다. 이제 파일 업로드가 완료되고 파일 경로가 숨겨진 필드에 기록됩니다.
5. 마지막으로 사용자는 원본 페이지를 제출할 때 양식의 작업 및 대상 속성 값만 재설정하면 됩니다.

다음은 효과 스크린샷과 이를 구현하는 코드입니다.

upload.php 페이지는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>iFrame异步文件上传</title> 
</head> 
<body> 
<h1>iFrame异步文件上传</h1> 
<form method="post" enctype="multipart/form-data"> 
  用户名: <input type="text" name="username" /><br /> 
  PHP iFrame은 페이지 새로 고침_php 팁 없이 비동기 파일 업로드를 구현합니다.: <input type="file" name="uploadphoto" onchange="startUpload(this.form)" /> 
  <iframe style="display:none" mce_style="display:none" name="uploadframe"></iframe> 
  <input type="hidden" id="photo" name="photo" value="" /> 
  <div id="displayphoto"></div> 
  <input type="submit" name="submitted" value="提交" onclick="formSubmit(this.form)" /> 
</form> 
<&#63;php  
//页面提交后显示相关信息 
if (isset($_POST['submitted'])) { 
  $html = '<hr /><p>上传成功！</p>'; 
  $html .= '<p>用户名：'.htmlspecialchars($_POST['username']).'</p>'; 
  $html .= '<p>头像地址：'.htmlspecialchars($_POST['photo']).'</p>'; 
  $html .= '<div><img  src="'.htmlspecialchars($_POST['photo']).'" mce_src="'.htmlspecialchars($_POST['photo']).'" / alt="PHP iFrame은 페이지 새로 고침_php 팁 없이 비동기 파일 업로드를 구현합니다." ></div><hr />'; 
  echo $html; 
} 
&#63;> 
</body> 
</html> 
<mce:script type="text/javascript"><!-- 
//选择了文件后开始异步上传 
function startUpload(oForm) { 
  document.getElementById('displayphoto').innerHTML = 'Loading...'; 
  oForm.action = 'proceedupload.php'; 
  oForm.target = 'uploadframe'; 
  oForm.submit(); 
} 
//整个页面的提交 
function formSubmit(oForm) { 
  oForm.action = document.URL; 
  oForm.target = '_self'; 
  oForm.submit(); 
} 
// --></mce:script>

로그인 후 복사

proceedupload.php 페이지는 다음과 같습니다.

<&#63;php 
//这里仅以特定图片格式举例，本应动态获取 
$url = 'upload/img' . time() . '.jpg'; 
if (move_uploaded_file($_FILES['uploadphoto']['tmp_name'], $url)) { 
  //删除之前的图片 
  $_POST['photo'] !== '' && unlink($_POST['photo']); 
&#63;> 
<html> 
<head> 
<body onLoad="doneLoading(parent, '<&#63;=$url&#63;>')"> 
</body> 
</html> 
<mce:script type="text/javascript"><!-- 
//在页面上显示刚刚上传成功的图像 
function doneLoading(theFrame, url) { 
  var oDiv = theFrame.document.getElementById('displayphoto'); 
  oDiv.innerHTML = '<img src="' + url + '" mce_src="' + url + '" alt="PHP iFrame은 페이지 새로 고침_php 팁 없이 비동기 파일 업로드를 구현합니다." />'; 
  theFrame.document.getElementById('photo').value = url; 
} 
// --></mce:script> 
<&#63;php 
}
&#63;>

로그인 후 복사

관심 있는 친구들은 이 기사의 예제를 테스트하고 실행할 수 있습니다. 나는 이 기사에 설명된 내용이 모든 사람이 PHP 프로그래밍을 배우는 데 특정 참고 가치가 있다고 믿습니다.