收藏
批改狀態(tài)：合格
老師批語(yǔ)：
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery/jquery-3.2.1.min.js"></script>
<style>
fieldset{
width: 80%;
height: 600px;
margin: auto;
text-align: center;
font-weight: bolder;
font-size: 2em;
color: black;
background-color: #cccccc;
}
P{
font-size: 1em;
padding: 20px;
}
p>input{
font-size: 1.1em;
margin-left: 20px;
}
p >input:hover{
color: orange;
cursor: pointer;
}
p>label{
background-color: red;
}
button{
width: 200px;
height: 70px;
background-color: paleturquoise;
font-size: 40px;
color: slategray;
}
button >span{
font-size: 1.1em;
}
</style>
</head>
<body>
<form method="POST" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="500000000">
<fieldset>
<legend>上傳文件</legend>
<p>
<label for="upload">上傳文件</label><input type="file" name="upload" id="upload">
</p>
<p align="center">
<button type="submit" name="submit" id="submit">上傳</button>
</p>
</fieldset>
</form>
<script>
$('#submit').click(function () {
// 1.獲取文件對(duì)象
var file_data=$('#upload')[0].files[0]
//2.上傳文件類型時(shí)要用FormData類
var formData = new FormData()
//3.添加文件對(duì)象
formData.append('upload',file_data)
//ajax處理事件
$.ajax({
url:'uploadPic.php',
type:'POST',
data:formData,
/**
* 必須false才會(huì)避開(kāi)jQuery對(duì) formdata 的默認(rèn)處理
* XMLHttpRequest會(huì)對(duì) formdata 進(jìn)行正確的處理
*/
processData: false,
/**
*必須false才會(huì)自動(dòng)加上正確的Content-Type 用于對(duì)data參數(shù)進(jìn)行序列化處理 這里必須false
*/
contentType: false,
dataType:'json',
cache:false,//上傳文件無(wú)需緩存
success: function (data) {
//數(shù)據(jù)狀態(tài)為0 上傳成功
if (data.status == 0) {
$('p').find('span').remove();
$('#submit').after('<span>').next().text(data.msg).css('color', 'green');
} else {
$('p').find('span').remove();
$('#submit').after('<span>').next().text(data.msg).css('color', 'red');
}
}
})
return false
})
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
php代碼（uploadPic.php）：
<?php
// 1.檢測(cè)請(qǐng)求是否是post
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
//2.檢查是否有文件被上傳
if (isset($_FILES['upload'])){
// 3.允許文件上傳的類型
$allow=['image/jpg','image/jpeg','image/png'];
//4.上傳文件的類型在這個(gè)$allow中
if (in_array($_FILES['upload']['type'],$allow)) {
if (is_uploaded_file($_FILES['upload']['tmp_name'])){
//5.將文件移動(dòng)到臨時(shí)目錄
if (move_uploaded_file($_FILES['upload']['tmp_name'],"pic/{$_FILES['upload']['name']}")) {
exit(json_encode(['status'=>0,'msg'=>'上傳成功！']));
}
}
} else {
exit(json_encode(['status'=>1,'msg'=>'選擇文件類型錯(cuò)誤']));
}
}
//對(duì)上傳錯(cuò)誤進(jìn)行處理
if ($_FILES['upload']['error']>0) {
switch ($_FILES['upload']['error']) {
case 1:
exit(json_encode(['status'=>2,'msg'=>'文件超過(guò)了php.ini配置大小']));
break;
case 2:
exit(json_encode(['status'=>3,'msg'=>'文件超過(guò)了html表單配置大小']));
break;
case 3:
exit(json_encode(['status'=>4,'msg'=>'僅有部分文件上傳']));
break;
case 4:
exit(json_encode(['status'=>5,'msg'=>'沒(méi)有文件上傳']));
break;
case 6:
exit(json_encode(['status'=>6,'msg'=>'沒(méi)有可用的臨時(shí)文件']));
break;
case 7:
exit(json_encode(['status'=>7,'msg'=>'磁盤已滿']));
break;
case 9:
exit(json_encode(['status'=>8,'msg'=>'上傳被終止！']));
break;
default:
exit(json_encode(['status'=>9,'msg'=>'未知錯(cuò)誤']));
break;
}
//刪除創(chuàng)建的臨時(shí)文件，當(dāng)然系統(tǒng)會(huì)自動(dòng)清空
if (file_exists($_FILES['upload']['tmp_name']) && is_file($_FILES['upload']['tmp_name'])){
unlink($_FILES['upload']['tmp_name']);
}
}
} else {
exit(json_encode(['status'=>10,'msg'=>'不是POST上傳']));
}點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
運(yùn)行效果圖：
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)