引用插件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; //返回文件路径
}
}
?>