利用js的FormData对象快速收集表单信息及无刷新上传头像
#preview, .img, img {
width: 200px;
height: 200px;
}
#preview {
border: 1px solid #000;
}
用户名:
密码:
头像:
function test(){
var form = new FormData(document.getElementById("tf"));
//var req = new XMLHttpRequest();
//req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
//req.send(form);
$.ajax({
url:"upload.php",
type:"post",
data:form,
processData:false,
contentType:false,
success:function(data){
window.clearInterval(timer);
console.log("over..");
},
error:function(e){
alert("错误！！");
window.clearInterval(timer);
}
});
}
function preview(file) {
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function(evt) {
prevDiv.innerHTML = '';
}
reader.readAsDataURL(file.files[0]);
} else {
prevDiv.innerHTML = '
}
}
upload.php
var_dump($_FILES);die;//这里直接写自己后台逻辑咯
?>
