1，异步上传文件的技术有好多种方式，如：ajaxfileupload插件，swfupload插件，html5等方式，但是本文介绍一种通过iframe方式的上传技术。
2，主要注意的地方是：顶级域相同的情况下，js跨域获取数据（window.domain='XXX.com'）；target属性的使用。具体如下：
（1）在父页面（所见到的上传页面）引入iframe（实际上传的东东是在此iframe页面），并显示出点击上传图片的标签（实际是点击iframe中的上传图片按钮，此处是用css样式覆盖的原因，用户实际点击的是子页面的上传按钮），具体代码如下：
<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页面需要注意css的地方，在父页面的点击实际点击的是此子页面的上传图片的按钮，同时注意js跨域及target指向一个空的iframe（实际的数据处理在此页面的）。具体代码如下：
<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）在服务器端的程序中，需要注意的地方是：如果需要把上传的图片在当前页面显示，就需要获取具体图片的url，同时要把图片的url传给顶级父页面。具体代码如下：
document.domain='XXX.com';window.top.addImg('http://2.XXX.com/uploads/".$_FILES['Filedata']['name']."');";?>
一定要注意echo出的那段js代码，首选是解决跨域，再个就是顶级父页面获取值，也可以把window.top改为parent.parent.
网友评论