文件上传最方便的方式是form方式提交,但它在有些场景并不适合,需要使用ajax方式来实现上传文件,ajax直接调用后台是无法将file传送给后台,这时就需要引入formData,然后设置相关阐述,下面将详细阐述
一、dom结构和js结构
dom结构
<form >
<label for="file">文件名:</label>
<input type="file" name="file" ><br>
<input type="button" name="submit" value="提交" >
</form>
js结构
1.$.post中contentType默认的值为:'application/x-www-form-urlencoded; charset=UTF-8,而文件上传一个是multipart/form-data,但是请求内容不只是文件上传。所有使用contentType:false
2.$.post中processData参数默认的值为true,会转数据格式,上传不需要转,所有使用processData: false
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$('#btn').click(function () {
var formData = new FormData(document.getElementById("form"));
console.log(formData)
$.ajax({
url: 'test.php',
type: 'post',
**contentType: false,**
** processData: false,**
data: formData,
success: res => {
console.log(res);
}
})
})
</script>
二、php后台代码
<?php
**// 允许上传的图片后缀**
**$dd = $_POST['dd'];**
**$allowedExts = array("gif", "jpeg", "jpg", "png");**
**$temp = explode(".", $_FILES["file"]["name"]);**
**echo $_FILES["file"]["size"];**
**$extension = end($temp); // 获取文件后缀名**
**if ((($_FILES["file"]["type"] == "image/gif")**
**|| ($_FILES["file"]["type"] == "image/jpeg")**
**|| ($_FILES["file"]["type"] == "image/jpg")**
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")*1
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 204800) // 小于 200 kb
&& in_array($extension, $allowedExts))
{
if ($_FILES["file"]["error"] > 0)
{
echo "错误:: " . $_FILES["file"]["error"] . "<br>";
}
else
{
echo "上传文件名: " . $_FILES["file"]["name"] . "<br>";
echo "文件类型: " . $_FILES["file"]["type"] . "<br>";
echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "文件临时存储的位置: " . $_FILES["file"]["tmp_name"] . "<br>";
// 判断当前目录下的 upload 目录是否存在该文件
// 如果没有 upload 目录,你需要创建它,upload 目录权限为 777
if (file_exists("upload/" . $_FILES["file"]["name"]))
{
echo $_FILES["file"]["name"] . " 文件已经存在。 ";
}
else
{
// 如果 upload 目录不存在该文件则将文件上传到 upload 目录下
move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]);
echo "文件存储在: " . "upload/" . $_FILES["file"]["name"].$dd;
}
}
}
else
{
echo "非法的文件格式";
}
?>
版权声明:除特别声明外,本站所有文章皆是本站原创,转载请以超链接形式注明出处!