利用隐藏iframe处理文件上传，本页不刷新，仿ajax

简述：

经常遇到文件上传的一些前端功能，例如:会员头像编辑，身份证等证件的上传等等；

而这时需要在当前页面完成整个上传过程，不刷新不跳转，就可以用到这个原理。

在页面中嵌入一个隐藏的iframe元素，并且让表单的target指向iframe的name属性值，例如：form中target="tarframe06"，iframe=name="tarframe06"；

然后检测，api返回的数据，最终来完成这个过程。

html代码：

<div class="putfile-img">
<section data-count="3">
<div class="putfileImg">
<div class="putfileImg-d">
<img src="/static/images/news_default_bg.png"><span></span>
</div>
</div>
<div class="putfileImg">
<div class="putfileImg-d">
<img src="/static/images/news_default_bg.png"><span></span>
</div>
</div>
<div class="putfileImg-upload putfileImg-upload06" data-input="6">
<div class="putfileImgD-upload">
<img src="/static/images/business/platform/pf_icon_upload.png">
</div>
</div>
<br class="clear" />
</section>
</div>

<!--photo-frm可以设置为display:none-->
<div class="photo-frm" style="display:none">
<form name="uploadFrom" id="uploadFrom06" action="/api/member/uploadAvatar" method="post"  target="tarframe06" enctype="multipart/form-data">
<input type="file" name="avatar" onchange="selectImage(this,6);" class="photo-input06">
</form>
<iframe  id="hidden_frame06" style="display:none" name="tarframe06"></iframe>
</div>

js代码：

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
//删除图片
$('.putfileImg .putfileImg-d span').on('click',function(){
//请求删除api，删除图片，比较简单，在此不做过多描述
$(this).parent('.putfileImg-d').parent('.putfileImg').remove();
});

//上传图片（数量限制）
$('.putfileImg-upload').on('click',function(){
var $this_count=$(this).parent('section').attr('data-count');
var $this_length=$(this).parent('section').children('.putfileImg').length;
if($this_length>=$this_count){
alert_seconds('图片不能超过'+$this_count+'张',1000);
}else{
$('.photo-input0'+$(this).attr('data-input')).trigger('click');
}

});
//出发表单，上传图片
function selectImage(file,index){
//若是h5 则可以使用本地图片可视化效果
/*if(!file.files || !file.files[0]){
return;
}
var reader = new FileReader();
reader.onload = function(evt){

var $temp_str='<div class="putfileImg"><div class="putfileImg-d"><img src="'+evt.target.result+'"><span></span></div></div>';
$('.putfileImg-upload0'+index).before($temp_str);
}
reader.readAsDataURL(file.files[0]);*/

$("#uploadFrom0"+index).submit();
//开始检测 iframe中是否返回正常结果
uploadFile_pho(index);
}

//检测文件上传的iframe中是否返回数据
function checkIframe_val(index) {
var arr0 = document.getElementById('hidden_frame0'+index).contentWindow;
var arr=arr0.document.body.innerText;
if (arr == "" || arr == undefined) {
setTimeout(function () {
checkIframe_val(index);
}, 200);
return 0;
} else {
var $jsonArr_flag=JSON.parse(arr);
if($jsonArr_flag.status==0){
return 1;
}else {
return 0;
}
}
}
//可以执行上传文件操作的 函数
function uploadFile_pho(index) {
if (checkIframe_val(index) == 1) {
var arr0 = document.getElementById('hidden_frame0'+index).contentWindow;
var arr=arr0.document.body.innerText;
var $jsonArr=JSON.parse(arr);
var $temp_str='<div class="putfileImg"><div class="putfileImg-d"><img src="'+$jsonArr.data.avatar+'"><span></span></div></div>';
$('.putfileImg-upload0'+index).before($temp_str);
} else {
setTimeout(function () {
uploadFile_pho(index);
}, 200);
}
}
</script>

示例如图：





关联文章：HTML5结合ajax实现文件上传以及进度显示