利用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;//這里直接寫自己后臺邏輯咯

?>

總結

以上是生活随笔為你收集整理的js ajax上传文件到服务器,使用ajax上传并预览图片后传到服务器上的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。