PHP的檔案上傳操作
阿新 • • 發佈：2022-05-04
先來看效果圖
上圖為上傳檔案前
上圖為上傳檔案後
核心知識 - 檔案上傳操作的基本步驟
1、構建基本的表單，並針對表單進行相關處理
2、在“上傳檔案”資料發生變化的時候，使用AJAX傳送請求
3、PHP獲得到檔案的基本資訊
4、PHP執行SQL，將獲取的基本資訊存入資料庫
5、PHP返回基本的圖片路徑
6、使用DOM操作設定預覽圖的路徑
最核心的知識，其實依舊是知識的邏輯。
前期需要有什麼？
最基本的資料庫和最基本的資料夾結構還是要有的。
此處基本的資料夾結構如下圖：
資料庫相關準備如下圖：
構建基本的表單，並針對表單進行相關處理
<form action="edit.php" class="form" class="add-form"> <div class="control"> <label for="username">使用者名稱：</label> <input type="text" name="username" id="username" value="HTML5學堂"> </div> <div class="control"> <label>頭像：</label> <div> <img src="" alt="需要上傳的圖片" id="face-img"> </div> <!-- 與upload-form表單的input相關聯 --> <label for="face" class="face">上傳圖片</label> </div> <div class="form-actions"> <input type="submit"> </div> </form> <!-- 檔案上傳的表單 --> <form action="file.php" method="post" class="upload-form" enctype="multipart/form-data"> <div> <input type="file" name="file" id="face"> </div> </form>
如果需要實現檔案的上傳，需要為表單form標籤增加一個屬性：enctype。表單中enctype="multipart/form-data"的意思，是設定表單的MIME編碼。預設情況，這個編碼格式是application/x-www-form-urlencoded，不能用於檔案上傳；只有使用了multipart/form-data，才能完整的傳遞檔案資料，實現檔案上傳。
在“上傳檔案”資料發生變化的時候，使用AJAX傳送請求
基本程式碼如下：
<script type="text/javascript"> $("#face").on("change", function(){ // 當值發生變化，且不為空的時候，通過AJAX提交表單 if($.trim($(this).val()) != "") { var url = $(".upload-form").attr("action"); // 使用jquery.form.js的AJAX提交表單 // API文件： https://github.com/malsup/form $(".upload-form").ajaxSubmit({ url : url, type: "POST", success: function(response) { } }); } }) </script>
為上傳檔案的input繫結change事件，監測值是否為空，如果不為空，則獲取到要提交的地址，進行資料的提交。此處涉及到兩個知識點，其一在於$.trim()方法，該方法是JQ的字串方法之一，主要用於去掉字串首尾的空格。第二個知識點，在於此處需要使用jquery.form.js外掛輔助完成AJAX對資料的提交——ajaxSubmit方法。
PHP獲得到檔案的基本資訊
<?php
header('Content-Type:text/json;charset=utf-8');
define('PATH', $_SERVER['DOCUMENT_ROOT']); // 定義檔案路徑
define('MYSQL_DATABASE', 'student'); // 定義要連線的資料庫
define('MYSQL_HOST', 'localhost'); // 定義主機地址
define('MYSQL_USER', 'root'); // 定義使用者名稱
define('MYSQL_PASSWORD', ''); // 定義密碼
define('AUTHOR', 'HTML5學堂');
define('AUTHOR_URL', 'http://www.h5course.com');
$conn = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD) or die("conn err!");
mysql_query("set names 'utf8'");
mysql_select_db(MYSQL_DATABASE, $conn);
$fileUrl = "";
$uploadfile = "img/".$_FILES["file"]["name"];
if(move_uploaded_file($_FILES["file"]["tmp_name"], $uploadfile)){
$fileUrl = "img/".$_FILES["file"]["name"]; // 資料庫圖片路徑
}
$arr["url"] = $fileUrl;
?>首先需要注意的是，最後要返回JSON型別內容，因此header命令中使用json型別。之後的資料庫連線我就不再講解了，如果還不是太清楚，可以檢視《PHP對資料庫的相關操作》
在PHP當中，通過$_FILES這個超全域性變數進行檔案相關資訊的獲取，使用$_FILES["file"]["name"]獲取檔案的名字，使用$_FILES["file"]["tmp_name"]進行臨時路徑的獲取，使用move_upload_file()方法進行檔案路徑的重新設定。
該函式的作用是把上傳的檔案移動到一個新的位置。有兩個引數，第一個引數是你上傳後的臨時檔名，由系統自動生成 —— $_FILE["file"]["tmp_name"];其中的file為你前臺檔案上傳表單的名稱。第二個引數就是包含有路徑的新的檔名。如："h5course/data.jpg";
PHP執行SQL，將獲取的基本資訊存入資料庫
具體程式碼如下：
// 插入資料庫
mysql_query("INSERT INTO images(fileUrl) VALUES('$fileUrl')"PHP返回基本的圖片路徑
將獲取到的地址進行JSON編碼，並使用echo語句將結果輸出出來。具體程式碼如下：
echo json_encode($arr); // 返回JSON資料，裡面有檔案的路徑使用DOM操作設定預覽圖的路徑
具體程式碼如下：
$("#face-img").attr("src", response.url);最後 奉上完全版本的程式碼
HTML檔案 - 基本結構與JS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5學堂 - 劉國利 尹鵬 - 獨行冰海 尹小芃槑</title>
<link rel="stylesheet" href="css/reset.css">
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<style>
.face {
border: 1px solid red;
}
.upload-form {
display: none;
}
</style>
</head>
<body>
<form action="edit.php" class="form" class="add-form">
<div class="control">
<label for="username">使用者名稱：</label>
<input type="text" name="username" id="username">
</div>
<div class="control">
<label>頭像：</label>
<div>
<img src="" alt="需要上傳的圖片" id="face-img">
</div>
<!-- 與upload-form表單的input相關聯 -->
<label for="face" class="face">上傳圖片</label>
</div>
<div class="form-actions">
<input type="submit">
</div>
</form>
<!-- 檔案上傳的表單 -->
<form action="file.php" method="post" class="upload-form" enctype="multipart/form-data">
<div>
<input type="file" name="file" id="face">
</div>
</form>
<script type="text/javascript">
$("#face").on("change", function(){
// 當值發生變化，且不為空的時候，通過AJAX提交表單
if($.trim($(this).val()) != "") {
var url = $(".upload-form").attr("action");
// 使用jquery.form.js的AJAX提交表單
// API文件： https://github.com/malsup/form
$(".upload-form").ajaxSubmit({
url : url,
type: "POST",
success: function(response) {
$("#face-img").attr("src", response.url);
}
});
}
})
</script>
</body>
</html>PHP檔案 —— 此處命名採用的是file.php
<?php
header('Content-Type:text/json;charset=utf-8');
define('PATH', $_SERVER['DOCUMENT_ROOT']); // 定義檔案路徑
define('MYSQL_DATABASE', 'student'); // 定義要連線的資料庫
define('MYSQL_HOST', 'localhost'); // 定義主機地址
define('MYSQL_USER', 'root'); // 定義使用者名稱
define('MYSQL_PASSWORD', ''); // 定義密碼
define('AUTHOR', 'HTML5學堂');
define('AUTHOR_URL', 'http://www.h5course.com');
$conn = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD) or die("conn err!");
mysql_query("set names 'utf8'");
mysql_select_db(MYSQL_DATABASE, $conn);
$fileUrl = "";
$uploadfile = "img/".$_FILES["file"]["name"];
if(move_uploaded_file($_FILES["file"]["tmp_name"], $uploadfile)){
$fileUrl = "img/".$_FILES["file"]["name"]; // 資料庫圖片路徑
}
$arr["url"] = $fileUrl;
// 插入資料庫
mysql_query("INSERT INTO images(fileUrl) VALUES('$fileUrl')");
echo json_encode($arr); // 返回JSON資料，裡面有檔案的路徑
?>歡迎溝通交流~HTML5學堂