이 글에서는 새로고침 없이 첨부파일을 업로드하는 기능을 구현하기 위한 PHP Ajax의 구체적인 코드를 자세히 소개하고 있습니다. 참고할만한 가치가 있으니 관심 있는 친구들이 참고해 보세요.
웹사이트에 있어서 기본적인 필수 기능 중 하나가 빠졌는데 바로 파일입니다. 업로드 중. 파일 업로드를 위해 PHP 사전 압축을 사용하면 고유한 이점이 있으므로 오늘은 새로 고침 없이 파일 업로드를 수행해 보겠습니다.
-------------------------------------- --------------------------------
일반 형식
프런트 엔드 페이지
<form action="./fileupload.php" method="POST"> <p>Username<input type="text" name="username" /></p> <p>Password<input type="password" name="password" /></p> <p>E-mail<input type="text" name="email" /></p> <input type="submit" value="Register" /> </form>
백그라운드 처리
print_r($_POST); $username = $_POSY['username']; $password = $_POST['password']; $email = $_POST['email']; // 在服务器上和数据库内容信息对比即可，实现相关的业务逻辑。
···
파일이 있는 양식
파일이 있는 양식과 일반 양식에는 큰 차이가 있습니다. 먼저 속성을 선언해야 합니다.
업로드한 양식에 파일 정보가 포함되어 있음을 서버에 알립니다.
새로고침 모드
새로고침 모드라고 하면, 즉 제출을 클릭하면 페이지가 비즈니스 처리 인터페이스로 이동합니다. 이는 우리가 일반적인 방식으로 구현하는 양식의 데이터 제출이기도 합니다.
프런트엔드 인터페이스
<form action="./fileupload.php" enctype="multipart/form-data" method="post"> <p>Username<input type="text" name="username" /></p> <p>Password<input type="password" name="password" /></p> <p>E-mail<input type="text" name="email" /></p> <p>Photo<input type="file" name="photo" /></p> <input type="submit" value="Register" />
백엔드 페이지
백엔드 페이지에서 일반 폼 데이터 외에 백그라운드 처리에서 가장 중요한 것은 파일 정보 처리입니다. PHP에는 업로드 비즈니스 로직을 구현하기 위해 업로드된 파일을 임시 데이터 영역에서 대상 폴더로 쉽게 전송할 수 있는 내장 기능이 있습니다.
move_uploaded_file('임시 파일 경로','대상 파일 경로');
새로 고침 방법 없음
새로 고침이 아닌 방법을 사용하는 경우 새로 고침 방법을 사용할 때와 유일한 차이점은 페이지 이동을 방지한다는 것입니다. 일반적으로 이를 수행하는 방법에는 두 가지가 있습니다.
•양식 제출 이벤트 종료 시 return false를 추가합니다.
<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(){
// to do something
···
// 阻止页面跳转
return false;
}
</script> •h5 관련 방법을 사용하세요.
<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(event){
// to do something
···
// 阻止页面跳转
event.preventDefault();
}
</script>기타 연산 처리는 점프가 있는 연산 처리와 동일할 수 있습니다.
대용량 파일 업로드
PHP는 파일 업로드를 구현하지만 매우 편리하고 빠릅니다. 하지만 업로드되는 파일의 크기는 무제한이 아닙니다. 기본적으로 업로드하는 파일의 크기를 제한하는 두 가지 요소가 있습니다.
•포스트의 극한 가치
•업로드의 극한 가치
php.ini 구성 정보를 수동으로 변경하여 업로드 파일 크기를 제어할 수 있습니다.
POST 극값
post_max_size = 200M
upload 극값
upload_max_filesize=200M
업로드 세부정보
aj ax 객체에는 upload라는 속성이 있으며 업로드도 수행됩니다. 객체로서 존재합니다. onprogress라는 메서드가 있습니다. 이 메서드를 모니터링하여 파일 업로드 프로세스의 비율을 확인할 수 있습니다.
프런트 엔드 페이지
<!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>文件上传示例</title>
<script>
window.onload = function(){
var form = document.getElementsByTagName("form")[0];
form.onsubmit = function(evt){
// 收集表单信息
var fd = new FormData(form);
var ajax = new XMLHttpRequest();
// 给Ajax设置文件上传的感知事件
ajax.upload.onprogress = function(evt){
var loaded = evt.loaded;
var total = evt.total;
document.getElementById("progress").value =(loaded/total)*100;
}
ajax.onreadystatechange = function() {
if(ajax.readyState==4){
alert(ajax.responseText);
}
}
ajax.open('post','./fileupload.php');
ajax.send(fd);
// 阻止浏览器的跳转
evt.preventDefault();
//return false;
}
}
</script>
</head>
<body>
<h2>无刷新方式上传附件</h2>
<form action="./fileupload.php">
<p>Username<input type="text" name="username" /></p>
<p>Password<input type="password" name="password" /></p>
<p>E-mail<input type="text" name="email" /></p>
<p>Photo<input type="file" name="photo" /></p>
<!--设置进度条-->
<style>
#parent {width:300px;height:34px;border:1px solid #033;}
#son {width:100%;height:10%;background-color:green}
progress {width:100%;height:34px;}
</style>
<p id="parent">
<p id="son">
<progress id="progress">
</p>
</p>
<input type="submit" value="Register" />
</form>
</body>
</html>백엔드 처리
<?php
//print_r($_POST);
//echo "---------------------"."<BR>";
//print_r($_FILES);
// 附件的存储位置、附件的名字，记得一定要存在upload文件夹
$path = "../upload/";
// 获取文件的原始名称
$origin_name = $_FILES['photo']['name'];
// 拼接成该文件在服务器上的名称
$server_name = $path.$origin_name;
if($_FILES['photo']['error']>0) {
die("出错了！".$_FILES['photo']['error']);
}
if(move_uploaded_file($_FILES['photo']['tmp_name'],$server_name)){
echo "<BR>"."Upload Success!";
}else{
echo "<BR>"."Upload Failed!".$_FILES['photo']['error'];
}
?>업로드 폴더가 있는지와 경로 문제가 있는지 확인하세요.
요약
파일 업로드는 아주 기본적인 기능이고 구현이 그리 복잡하지 않습니다. 하지만 이 기능은 매우 중요하므로 파일 업로드를 통해 사용자의 아바타 및 기타 파일 정보를 쉽게 수정할 수 있습니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
관련 추천:
php연도와 월에 따라 이번 달의 일수와 날짜 배열을 얻는 방법에 대한 자세한 그래픽과 텍스트 설명
PHP는 다중- Uploadify 플러그인 아이디어 분석과 결합된 이미지 업로드
PHP는 지정된 날짜의 요일을 가져오는 방법을 구현합니다
위 내용은 PHP Ajax를 사용하여 새로 고치지 않고 첨부 파일을 업로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
