本篇主要实现ajax同步上传表单图片，替代表单的submit事件。有时候我们不想实现ajax异步上传图片，会容易造成表单没提交之前，图片先异步传到服务器，要是表单不提交了，将会导致产生冗余的图片。
html页面代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--利用cdn添加js和css库 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
投诉人： <input type="text" name="name" id="name" /><br>
上传证明图片：<input type="file" name="litpic" id="litpic" accept="image/gif,image/png,image/jpg,image/jpeg">
<button οnclick="checkSubmit();">提交</button>
<script type="text/javascript">
function checkSubmit(){ //提交实践
var name = $("#name").val();
var litpic= document.getElementById('litpic').files[0]; //获取文件路径名
//var litpic= $("#litpic")[0].files[0]; //这句跟上一面那句作用一样
console.log(document.getElementById('litpic').files[0]);
var formData = new FormData();
formData.append('name',name);
formData.append('litpic',litpic);
$.ajax({
type: "POST",
url: "test.php", //同目录下的php文件
data:formData,
dataType:"json", //声明成功使用json数据类型回调
//如果传递的是FormData数据类型，那么下来的三个参数是必须的，否则会报错
cache:false, //默认是true，但是一般不做缓存
processData:false, //用于对data参数进行序列化处理，这里必须false；如果是true，就会将FormData转换为String类型
contentType:false, //一些文件上传http协议的关系，自行百度，如果上传的有文件，那么只能设置为false
success: function(msg){ //请求成功后的回调函数
}
});
}
</script>
</body>
</html>
test.php 代码：
<?php
// 这里能正常接收到 $_FILES 对象，接下来就可以实现你的上传图片代码了，以下代码仅供参考。
date_default_timezone_set('PRC'); //获取中国时区，'PRC':*
if(!file_exists(date("Ymd",time()))) //如果文件夹不存在，则创建一个
mkdir(date("Ymd",time()));
$username = $_POST['name']; //获取索引
$filesName = $_FILES['litpic']['name']; //文件名数组
$filesTmpName = $_FILES['litpic']['tmp_name']; //临时文件名数组
$filePath = date("Ymd",time()).'/'.$filesName; //文件路径
if(!file_exists(date("Ymd",time()).'/'.$filesName)){
move_uploaded_file($filesTmpName, $filePath);
}
$json_array = array('name'=>$username,'litpic'=>$filePath); //转换成数组类型
$json = json_encode($json_array); //将数组转换成json对象
echo $json;
?>