ホームページ >バックエンド開発 >PHPチュートリアル >PHP Ajaxを使用して添付ファイルを更新せずにアップロードする方法
PHP Ajaxを使用して添付ファイルを更新せずにアップロードする方法
- 墨辰丷オリジナル
- 2018-06-01 15:22:431409ブラウズ
この記事では、更新せずに添付ファイルをアップロードする機能を実装するための PHP Ajax の具体的なコードを詳しく紹介します。興味のある方は参考にしてください。
Web サイトにとって欠落している機能が 1 つあります。アップロード中。 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']; // 在服务器上和数据库内容信息对比即可，实现相关的业务逻辑。
???
ファイルを含むフォームと通常のフォームには大きな違いがあります。 まず、属性の宣言を追加する必要があります。次のように:
702865191b61c97523db8fc12c31cb75を使用して、アップロードしたフォームにファイル情報が含まれていることをサーバーに伝えます。
リフレッシュモードリフレッシュモードについて言えば、送信をクリックした後、ページはビジネス処理インターフェースにジャンプします。これも通常の方法で実装するフォームのデータ送信です。
フロントエンドインターフェース
<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('一時ファイルパス','ターゲットファイルパス');
リフレッシュメソッドなし非リフレッシュメソッドを使用する場合、リフレッシュメソッドを使用する場合との唯一の違いは、ページのジャンプを防ぐことです。通常、これを行うには 2 つの方法があります。
•フォーム送信イベントの最後に 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 はファイルのアップロードを実装していますが、非常に便利で高速です。ただし、アップロードされるファイルのサイズは無制限ではありません。デフォルトでは、アップロードするファイルのサイズを制限する要因が 2 つあります。
•投稿の極限値 •アップロードの極限値
php.iniの設定情報を手動で変更することで、アップロードファイルのサイズを制御できます。
POST極値post_max_size = 200M
極値をアップロードupload_max_filesize=200M
アップロード詳細aj ax オブジェクトには、upload という属性があり、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 Ajaxを使用して添付ファイルを更新せずにアップロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。