我們?cè)陂_(kāi)發(fā)項(xiàng)目的時(shí)候經(jīng)常會(huì)使用ajax上傳圖像，但是iframe上傳和flash插件都很復(fù)雜，下面錯(cuò)新技術(shù)頻道小編整理了ajax實(shí)現(xiàn)無(wú)刷新上傳文件功能的文章，感興趣的你也可以看下哦!
詳細(xì)代碼如下
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>ajax無(wú)刷新上傳文件</title><script>window.onload = function(){ var oBtn = document.getElementById('btn'); var oMyFile = document.getElementById('myFile'); oBtn.onclick = function() { //alert(oMyFile.value); //獲取到的是file控件的value值,這個(gè)內(nèi)容是顯示給你看的文字,不是我們選擇的文件 //oMyFile.files file控件中選擇的文件列表對(duì)象 //alert(oMyFile.files); //我們是要通過(guò)ajax把oMyFile.files[0]數(shù)據(jù)發(fā)送給后端 /* for (var attr in oMyFile.files[0]) { console.log( attr + ' : ' + oMyFile.files[0][attr] ); } */ //利用ajax發(fā)送必須要有一個(gè)ajax對(duì)象 var xhr = new XMLHttpRequest(); //監(jiān)聽(tīng)上傳事件 xhr.onload = function(){ //alert(1); //alert(this.responseText);//后端返回的數(shù)據(jù) var d = JSON.parse(this.responseText); alert(d.msg + ' : ' + d.url); //顯示上傳成功 并且顯示文件路徑 } xhr.open('post','post_file.php',true); //open打開(kāi)的方式不能使用get,上傳文件的地址,使用異步上傳 //在使用post發(fā)送的時(shí)候必須要帶一些請(qǐng)求頭信息 xhr.setRequestHeader('X-Request-With', 'XMLHttpRequest'); //send要發(fā)送數(shù)據(jù) //將要上傳的數(shù)據(jù)轉(zhuǎn)換成二進(jìn)制數(shù)據(jù) //那么必須知道后端接收當(dāng)前文件的名稱是什么 然后后面帶上當(dāng)前文件的數(shù)據(jù) var oFormData = new FormData(); //通過(guò)FormData來(lái)構(gòu)建提交數(shù)據(jù) 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'=>'錯(cuò)誤提交方式'));}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'=>'出現(xiàn)了一些錯(cuò)誤'));function exit_status($str){ echo json_encode($str); exit;}?>錯(cuò)新技術(shù)頻道小編為大家整理了ajax實(shí)現(xiàn)無(wú)刷新上傳文件功能，你覺(jué)得可以嗎?如果你有更多的想法，也可以給錯(cuò)新技術(shù)頻道小編進(jìn)行留言哦!新聞熱點(diǎn)
疑難解答
圖片精選
