ajax 图片和form上传,jquery ajax通过FormData上传图片或文件

无标题文档姓名：电话：内容：文件：

var myfile,

myjson = {};

$("#myfile").change(function(e){

myfile = e.target.files[0];

//myfile = $(this)[0].files[0];

//生成缩略图

var reader = new FileReader();

reader.onload = (function(){

return function(){

$("#showImage")[0].src=this.result;

};

})(myfile);

reader.readAsDataURL(myfile);

});

$("#mybtn").click(function(){

var myFormData = new FormData();

myjson = {

name: $("#name").val(),

phone: $("#phone").val(),

content: $("#content").val(),

photo: myfile

};

for(var x in myjson){

myFormData.append(x, myjson[x]);

}

$.ajax({

url: "yourapi.php",

type: "POST",

dataType: "json",

data: myFormData,

cache: false,//上传文件不需要缓存

contentType: false,//告诉jQuery不要去设置ContentType请求头

processData: false,//告诉jQuery不要去处理发送的数据

beforeSend: function(){

//showLoad(true);显示加载动画

},success: function(res){

//showLoad(false);隐藏加载动画

},error: function(){

//showLoad(false);隐藏加载动画

}

});

});

yourapi.php代码：

$name = isset($_POST['name'])? $_POST['name'] : '';

$phone = isset($_POST['phone'])? $_POST['phone'] : '';

$content = isset($_POST['content'])? $_POST['content'] : '';

$filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.'));

$response = array();

if(move_uploaded_file($_FILES['photo']['tmp_name'], $filename)){

$response['isSuccess'] = true;

$response['name'] = $name;

$response['phone'] = $phone;

$response['content'] = $content;

$response['photo'] = $filename;

}else{

$response['isSuccess'] = false;

}

echo json_encode($response);

?>

Servlet 3.0开始，可以通过request.getPart()或request.getPars()两个接口获取上传的文件。

相关文档：