jquery ajax实现文件上传

时间:2023-03-10 04:22:20
jquery ajax实现文件上传

test5.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
$(document).ready(function(){
$("#ajax-submit").click(function(){
var formdata=new FormData();
formdata.append("user",$("#user").val());
formdata.append("avatar_img",$("#avatar")[0].files[0]);
$.ajax({ url:"phpinfo.php",
type:"post",
data:formdata,
processData: false , // 不处理数据
contentType: false, // 不设置内容类型 success:function(data){
console.log(data)
}
}) })
})
</script>
</head>
<body>
<form>
用户名 <input type="text" id="user">
头像 <input type="file" id="avatar">
<input type="button" id="ajax-submit" value="ajax-submit">
</form>
</body>
</html>

phpinfo.php

<?php
header("Content-type: text/html; charset=utf-8"); print_r($_POST); print_r($_GET); print_r($_FILES); exit;

报文:

jquery ajax实现文件上传