本文實例為大家分享了ajax實現無刷新上傳文件功能的具體代碼，供大家參考，具體內容如下
詳細代碼如下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax無刷新上傳文件</title>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
var oMyFile = document.getElementById('myFile');
oBtn.onclick = function() {
//alert(oMyFile.value); //獲取到的是file控件的value值,這個內容是顯示給你看的文字,不是我們選擇的文件
//oMyFile.files file控件中選擇的文件列表對象
//alert(oMyFile.files);
//我們是要通過ajax把oMyFile.files[0]數據發送給後端
/*
for (var attr in oMyFile.files[0]) {
console.log( attr + ' : ' + oMyFile.files[0][attr] );
}
*/
//利用ajax發送必須要有一個ajax對象
var xhr = new XMLHttpRequest();
//監聽上傳事件
xhr.onload = function(){
//alert(1);
//alert(this.responseText);//後端返回的數據
var d = JSON.parse(this.responseText);
alert(d.msg + ' : ' + d.url); //顯示上傳成功 並且顯示文件路徑
}
xhr.open('post','post_file.php',true); //open打開的方式不能使用get,上傳文件的地址,使用異步上傳
//在使用post發送的時候必須要帶一些請求頭信息
xhr.setRequestHeader('X-Request-With', 'XMLHttpRequest');
//send要發送數據
//將要上傳的數據轉換成二進制數據
//那麼必須知道後端接收當前文件的名稱是什麼 然後後面帶上當前文件的數據
var oFormData = new FormData(); //通過FormData來構建提交數據
oFormData.append('file',oMyFile.files[0]);
xhr.send(oFormData);
}
}
</script>
</head>
<body>
<input type="file" id="myFile" /><input type="button" id="btn" value="上傳" />
</body>
</html>
後端php代碼post_file.php
<?php
header('Content-type:text/html; charset="utf-8"');
$upload_dir = 'uploads/';
if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
exit_status(array('code'=>1,'msg'=>'錯誤提交方式'));
}
if(array_key_exists('file',$_FILES) && $_FILES['file']['error'] == 0 ){
$pic = $_FILES['file'];
if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
exit_status(array('code'=>0,'msg'=>'上傳成功','url'=>$upload_dir.$pic['name']));
}
}
echo $_FILES['file']['error'];
exit_status(array('code'=>1,'msg'=>'出現了一些錯誤'));
function exit_status($str){
echo json_encode($str);
exit;
}
?>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。