我們在開發項目的時候經常會使用ajax上傳圖像，但是iframe上傳和flash插件都很復雜，下面錯新技術頻道小編整理了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
<?phpheader('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;}?>錯新技術頻道小編為大家整理了ajax實現無刷新上傳文件功能，你覺得可以嗎?如果你有更多的想法，也可以給錯新技術頻道小編進行留言哦!新聞熱點
疑難解答
圖片精選
