在wordpress後台管理的插件管理介面，想添加一個ajax無刷新的上傳，#先說一下思路： 上傳文件，必需得取得當前的文件的資料流，然後透過ajax的post方式傳送給伺服器處理。
（1）如何取得目前檔案的資料流呢？
答：透過FormData()實例化的對象，將檔案資料append在一個變數裡面
（2）如何取得資料？
答案：在type為file的input表單中，自備一個files屬性。
HTML頁面發送檔案上傳請求：
<input type="file" name="upload_img" id='upload_img'/>
<img src="" id='myfile_img' alt='' title='' width='300'/>
<script type="text/javascript">
var uploadImg = document.getElementById('upload_img');
var myfileImg = document.getElementById('myfile_img');
uploadImg.onchange = function()
{
var imgName = this.files[0].name;
//let reader = new FileReader();
var fordata = new FormData();
fordata.append('my_file',this.files[0]);
//向服务器发送文件数据
ajaxPost(fordata,function(obj){
var content = JSON.parse(obj.response);
console.log(content);
if(content.status == 'sucess'){
myfileImg.src = './images/'+imgName;
}
});
}
function ajaxPost(data,fn)
{
var xhr = new XMLHttpRequest();
xhr.open('post','./upload.php','true');
xhr.send(data);
xhr.onload = function()
{
fn(this);
}
}
</script>伺服器處理文件數據，產生上傳的檔案：
$success = array('status' => 'sucess', 'code' => '1');
$error = array('status' => 'error', 'code' => '0');
if (!empty($_FILES)) {
$file = $_FILES['my_file'];
$new_file_dir = dirname(__FILE__) . '/images/' . $file['name'];
@move_uploaded_file($file['tmp_name'], $new_file_dir);
exit(json_encode($success));
} else {
exit(json_encode($error));
}相關推薦：
#以上是javascript實作上傳檔案到後台接收的詳細內容。更多資訊請關注PHP中文網其他相關文章！
