1勋桶，異步上傳文件的技術(shù)有好多種方式汁尺，如：ajaxfileupload插件形庭，swfupload插件豆挽，html5等方式，但是本文介紹一種通過(guò)iframe方式的上傳技術(shù)挖胃。
2啃洋，主要注意的地方是：頂級(jí)域相同的情況下碾盐，js跨域獲取數(shù)據(jù)（window.domain='XXX.com'）欢嘿；target屬性的使用衰琐。具體如下：
（1）在父頁(yè)面（所見(jiàn)到的上傳頁(yè)面）引入iframe（實(shí)際上傳的東東是在此iframe頁(yè)面），并顯示出點(diǎn)擊上傳圖片的標(biāo)簽（實(shí)際是點(diǎn)擊iframe中的上傳圖片按鈕际插，此處是用css樣式覆蓋的原因碘耳，用戶實(shí)際點(diǎn)擊的是子頁(yè)面的上傳按鈕），具體代碼如下：
<script src="http://XXX.jquery.js" language="javascript"></script>
<style>
.db{ display:block; }
.dib {
display: inline-block;
}
.cp {
cursor: pointer;
}
.pa {
position: absolute;
}
</style>
<script>
document.domain='XXX.com';
</script>
<iframe width="80" height="24" frameborder="0" scrolling="no" allowtransparency="true" id="uploadpic" name="upload" src="http://2.XXX.com/iframe.html?dddd" class="db pa" style="left:0px; top:0px; z-index:5"></iframe>
<span class='AddPicBtn'>添加圖片</span>
<script>
function Rluploading(){
jQuery('#uploadpic').next().html('上傳中...');
}
function addImg(value){
jQuery('#uploadpic').next('.AddPicBtn').html('添加圖片');
jQuery('#addImg').attr('src',value);
}
</script>
<br /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<img id='addImg'>
（2）在iframe頁(yè)面需要注意css的地方框弛，在父頁(yè)面的點(diǎn)擊實(shí)際點(diǎn)擊的是此子頁(yè)面的上傳圖片的按鈕，同時(shí)注意js跨域及target指向一個(gè)空的iframe（實(shí)際的數(shù)據(jù)處理在此頁(yè)面的）捕捂。具體代碼如下：
<style>
body{margin:0;padding:0; overflow:hidden}
input{position:absolute;width:70px;height:24px;opacity:0;filter:alpha(opacity=0);z-index:2;cursor:pointer; cursor:pointer;}
.cpDv{ position:absolute;width:70px;height:24px;}
.cp{ cursor:pointer;}
</style>
<body>
<iframe src="" frameborder="0" style="display:none;" name="uploadtarget"></iframe>
<form action="http://2.XXX.com/upload.php?from=club&isdc=1?dddaw8874" name="uploadform" class="cp" method="post" id="uploadform" target="uploadtarget" enctype="multipart/form-data">
<input type="file" name="Filedata" id="file" value=""/>
<input type="hidden" name="type" value="img" />
<div class="cp cpDv"></div>
</form>
<script>
document.domain='XXX.com';
var fileEle = document.getElementById('file'),
formEle = document.getElementById('uploadform'),
type = 'gif|jpg|jpeg';
fileEle.onchange = function(){
var value = this.value;
if(type.indexOf(value.slice(value.lastIndexOf('.') + 1)) === -1){
alert('只允許上傳gif, jpg, jpeg文件');
return;
}
//parent.Rluploading();
formEle.submit();
}
</script>
</body>
（3）在服務(wù)器端的程序中瑟枫，需要注意的地方是：如果需要把上傳的圖片在當(dāng)前頁(yè)面顯示，就需要獲取具體圖片的url指攒，同時(shí)要把圖片的url傳給頂級(jí)父頁(yè)面慷妙。具體代碼如下：
document.domain='XXX.com';window.top.addImg('http://2.XXX.com/uploads/".$_FILES['Filedata']['name']."');";?>
一定要注意echo出的那段js代碼，首選是解決跨域允悦，再個(gè)就是頂級(jí)父頁(yè)面獲取值膝擂，也可以把window.top改為parent.parent.
