引用插件query.js
引用插件ajaxfileupload.js
上傳頁面：index.php
<html>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<body>
<p><input type="file" id="file1" name="myFile" /></p>
<button onclick="doupload()">上傳</button>
<p><img style="display: none;" width="50px" height="50px" id="img1" alt="" src="" /></p>
</body>
<script type="text/javascript">
function doupload(){
$.ajaxFileUpload
(
{
url: 'FileHelper.php', //用於文件上傳的服務器端請求地址
dataType: 'text', //返回值類型 一般設置為json
fileElementId: 'file1', //文件上傳域的ID
success: function (data) //服務器成功響應處理函數
{
if (data=="400ExeErr") { alert("文件擴展名錯誤");}
else if (data=="400FileSizeErr") {alert("文件過大");}
else{
alert("ok");
$("#img1").attr("src",data);
$("#img1").show();
}
},
error: function (data, status, e)//服務器響應失敗處理函數
{
alert(e);
}
}
)
}
</script>
</html>
FileHelper.php為文件上傳類：
<?php
header("Content-Type: text/html;charset=utf-8");
$MyFilePath="./Upload/"; //定義上傳文件夾名稱
$Extensions= array("jpeg","jpg","png"); //定義允許上傳的文件擴展名
$MaxFileSize=2; //定義允許上傳的最大文件M為單位
$Time=time(); //時間戳
if(isset($_FILES['myFile'])){
$file_name = $_FILES['myFile']['name'];
$file_size = $_FILES['myFile']['size'];
$file_tmp = $_FILES['myFile']['tmp_name'];
$file_type = $_FILES['myFile']['type'];
$name_arr = explode('.',$_FILES['myFile']['name']);
$file_ext=strtolower(end($name_arr));
/* 規定可以上傳的擴展名文件 */
if(in_array($file_ext,$Extensions)=== false){
echo "400ExeErr";
}
/* 規定可以上傳的文件大小 */
if($file_size > ($MaxFileSize*1024*1024)) {
echo "400FileSizeErr";
}
if(in_array($file_ext,$Extensions)=== true&&$file_size < ($MaxFileSize*1024*1024)){
/* 把圖片從臨時文件夾內的文件移動到當前腳本所在的目錄 */
$NewFileName=$Time."_".$file_name;
$AllFilePath=$MyFilePath.$NewFileName;
move_uploaded_file($file_tmp,$AllFilePath);
echo $AllFilePath; //返回文件路徑
}
}
?>