h5圖片上傳php
在網(wǎng)站開發(fā)中，圖片上傳是不可或缺的功能。過去我們使用傳統(tǒng)的文件上傳方式，但現(xiàn)在使用HTML5的File API可以輕松實現(xiàn)圖片的上傳，而不需要刷新頁面。File API提供原生的JavaScript實現(xiàn)文件讀取和展示，然后配合服務器語言（如PHP）進行文件的保存和處理。本文將會介紹如何使用H5圖片上傳和php的上傳處理方式。
html頁面的實現(xiàn)
下面是一個簡單的HTML頁面，使用了H5文件上傳控件：
<!DOCTYPE html>
<html>
<head>
<title>H5圖片上傳</title>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="upload.php">
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="上傳" />
</form>
</body>
</html>上面的代碼中，我們使用了type為file的input元素來讓用戶選擇上傳的文件。enctype設(shè)為multipart/form-data，這樣表單數(shù)據(jù)就可以支持文件上傳了。這個表單的目標是upload.php文件，當上傳成功后會自動跳轉(zhuǎn)到該腳本。
使用JavaScript讀取圖片文件
在文件上載到服務器前，我們想要預覽圖片并判斷是否符合條件。通過File API可以輕松實現(xiàn)。當用戶選擇了一個或多個文件后，我們就可以使用JavaScript來讀取這些文件。下面是讀取圖片文件并顯示預覽圖的代碼：
<script>
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result; // 將讀取到的圖片放到![]()
標簽中顯示
}
if (file) {
reader.readAsDataURL(file); // 讀取文件作為 URL
} else {
preview.src = "";
}
}
// 文件選擇時觸發(fā)事件，調(diào)用預覽函數(shù)
document.querySelector('input[type=file]').addEventListener('change', previewFile);
</script>我們通過querySelector讀取了一個img標簽和input[type=file]元素，當文件選擇后調(diào)用previewFile函數(shù)。在函數(shù)中，先使用FileReader API創(chuàng)建一個實例，然后將文件讀取為一個Base64編碼字符串。最后將字符串放到img標簽的src中呈現(xiàn)出來。在上面的代碼中，我們?yōu)槲募x擇控件添加了change事件處理器，這是因為該控件是有變化的，用戶想選擇文件時觸發(fā)的是change事件。
使用PHP處理上傳文件
JavaScript將讀取文件并顯示預覽圖，但我們?nèi)孕枰獙⑽募l(fā)送到服務器。下面是一個簡單的PHP文件上傳代碼：
<?php
if (isset($_FILES['file'])) {
$errors = array();
$file_name = $_FILES['file']['name'];
$file_size = $_FILES['file']['size'];
$file_tmp = $_FILES['file']['tmp_name'];
$file_ext = strtolower(end(explode('.', $file_name)));
$extensions = array("jpeg","jpg","png");
if (in_array($file_ext, $extensions) === false) {
$errors[] = "后綴名錯誤！只有jpg,jpeg,png類型的文件為合法文件。";
}
if ($file_size >2097152) {
$errors[] = '文件大小不能超過2 MB';
}
if (empty($errors) == true) {
move_uploaded_file($file_tmp, "./Uploads/".$file_name);
echo '上傳成功';
} else {
print_r($errors);
}
}
?>該代碼首先判斷是否有文件上傳，然后檢查文件大小和后綴名是否正確。如果所有條件都正確，就將文件從臨時存儲位置保存到服務器硬盤，需要指定文件的保存路徑和文件名。最后，提示用戶上傳結(jié)果。
總結(jié)
使用HTML5的File API和PHP的服務器語言，我們可以輕松實現(xiàn)圖片上傳功能。我們可以使用JavaScript讀取和顯示文件預覽圖，并使用PHP來檢查文件大小和后綴名是否正確，最終存儲到我們指定的位置。希望本文能夠幫到你。