<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<form id="imageForm" method="post" action="" enctype="multipart/form-data">
<input id="imageFile" name="imageFile" type="file" style="margin-left:40px;display:inline-block;height:34px;"/>
</form>
<div style="border-top: 1px solid rgba(0, 0, 0, 0.1);text-align: center;">
<input id="saveBtn" type="button" class="button" value="添 加" style="border-radius:0;width:260px;height:40px;margin:auto 50px;margin:20px; background: #263552 !important;color: #ffffff !important;"/>
</div>
</body>
<script type="text/javascript">
$(function(){
$("#saveBtn").click(function(){
var imageFile = $("#imageFile").val();
if(imageFile == '' || imageFile.length == 0){
alert("请选择要上传的图片");
return;
}
var formData = new FormData();
formData.append('img',$("#imageFile")[0].files[0]);
formData.append('token',"2a236919498e76c8437bc71a188660b6");
formData.append('id',"24");
$.ajax({
url:"http://oatest.com/vue.php?m=user&a=edit",
type:"post",
data:formData,
dataType:"json",
// 告诉jQuery不要去处理发送的数据
processData: false,
// 告诉jQuery不要去设置Content-Type请求头
contentType: false,
beforeSend: function () {
console.log("正在进行，请稍候");
},
success:function(data){
console.log(data);
},
error:function(data){
console.log(data);
},
})
})
})
</script>
</html>
网友评论