HTML檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 相容 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<!-- 引入layui樣式 -->
<link rel="stylesheet" href="layui/css/layui.css" target="_blank" rel="external nofollow" >
<!-- 引入layui js -->
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!-- 引入bootstrap樣式 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" target="_blank" rel="external nofollow" >
<!-- 引入bootstrap js -->
<script src="bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>多檔案</legend>
</fieldset>
<div class="layui-upload">
<button type="button" class="layui-btn" id="uploadId">選擇上傳檔案</button>
<div class="layui-inline layui-word-aux">
</div>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
預覽圖：
<div class="layui-upload-list" id="show"></div>
</blockquote>
</div>
<script type="text/javascript">
layui.use('upload', function() {
var upload = layui.upload,
$ = layui.jquery;
var uploadInst = upload.render({
elem: '#uploadId',
accept: 'file', //指定允許上傳時校驗的檔案類型，可選值有：images（圖檔）、file（所有檔案）、video（視訊）、audio（音頻）
multiple: 'true',
url: 'http://localhost/guanwnag/php/up.php',
before: function(obj) {
//預讀本地檔案示例，不支援ie8
obj.preview(function(index, file, result) {
if ((file.type).indexOf("image") >= 0) {
$('#show').append('<img src="' + result + '" alt="' + file.name +
'" class="layui-upload-img" style="max-width:100%">')
} else {
$('#show').append(file.name)
}
// console.log(file);
});
},
done: function(res) {
layer.msg(res.msg, {
time: '5000',
tipsMore: true,
zIndex: '2'
});
},
allDone: function(obj) { //當檔案全部被送出後，才觸發
$('.layui-word-aux').append("執行完畢，檔案總數：" + obj.total + "成功：" + obj.successful + "個，失敗：" + obj.aborted + "個");
console.log(obj.total); //得到總檔案數
console.log(obj.successful); //請求成功的檔案數
console.log(obj.aborted); //請求失敗的檔案數
},
error: function() {
//請求異常
}
});
});
</script>
</body>
</html>
php檔案
<?php
header("Access-Control-Allow-Origin: *"); //解決跨域
header('Access-Control-Allow-Methods:post');// 響應類型
date_default_timezone_set('PRC');//擷取目前時間
//上傳檔案目錄擷取
$month = date('Ym', time());
define('BASE_PATH', str_replace('\\', '/', realpath(dirname(__FILE__).'/'))."/");
$dir = BASE_PATH."upload/".$month."/";
//初始化傳回數組
$arr = array(
'code' => 0,
'msg'=> '',
'data' =>array(
'src' => $dir . $_FILES["file"]["name"]
),
);
$file_info = $_FILES['file'];
$file_error = $file_info['error'];
if (!is_dir($dir)) {//判斷目錄是否存在
mkdir($dir, 0777, true);//如果目錄不存在則建立目錄
};
$file = $dir.$_FILES["file"]["name"];
if (!file_exists($file)) {
if ($file_error == 0) {
if (move_uploaded_file($_FILES["file"]["tmp_name"], $dir. $_FILES["file"]["name"])) {
$arr['msg'] ="上傳成功";
} else {
$arr['msg'] = "上傳失敗";
}
} else {
switch ($file_error) {
case 1:
$arr['msg'] ='上傳檔案超過了PHP配置檔案中upload_max_filesize選項的值';
break;
case 2:
$arr['msg'] ='超過了表單max_file_size限制的大小';
break;
case 3:
$arr['msg'] ='檔案部分被上傳';
break;
case 4:
$arr['msg'] ='沒有選擇上傳檔案';
break;
case 6:
$arr['msg'] ='沒有找到臨時檔案';
break;
case 7:
case 8:
$arr['msg'] = '系統錯誤';
break;
}
}
} else {
$arr['code'] ="1";
$arr['msg'] = "目前目錄中，檔案".$file."已存在";
}
echo json_encode($arr);
![php寫一個簡潔的登入頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)