利用隐藏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" οnchange="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>