利用iframe进行ajax文件提交

利用iframe内嵌框架ajax图片上传剖析

虽然网上关于jquery的插件一大堆，但是配置文件和相关设置也是相当麻烦，这是一个简易的上传方案。代码量相对来说已经少了很大一截了。

<div>
    <form class="J_upForm" data-index="1" enctype="multipart/form-data" action="" method="post">
        <input type="file" name="file" data-index="1" size="1" class="J_uploadFile">
    </form>
</div>
           

javascript 代码如下所示，依赖jQuery，自行修改

var app = {
    config:{//配置信息
        timeout:,//上传超时时间
        istimeout:{},是否超时
        upload:{},//上传做clear记录
    },
    //初始化
    init:function(){
    var that = this;
    jQuery('.J_uploadFile').on("change",function(event){
                var index = jQuery(this).attr("data-index"),//回调时用的着，也可以是hash值或是token
                    value = jQuery(this).val();//获取input file的值
                if(value){//判断是否有值，防止重复，(详细了解input 的change事件触发顺序)
                    if(!/\.(jpg|png|jpeg)$/i.test(value)){//图片格式校验
                        alert("请上传jpg、png格式的图片！");
                        return false;
                    }
                    if (window.File && window.FileReader && window.FileList && window.Blob){ //本地校验文件大小，不适用于IE
                        var file = event.target.files;
                        if(file.size/(*) > ){
                            alert("您上传的图片大于了5M，请用其他工具处理后再上传吧！");
                            return false;
                        }
                    }
                    //设置主域名
                    document.domain = "coolpad.com";//跨域上传需要的东西在iframe中用得着
                    that.doupload(index);//上传操作
                }
            });
    },
    //上传操作
    doupload:function(index){
        var that = this;
        rand = Math.floor(Math.random() * ),//生产随机数
        url  = '图片上传地址，自定义'+'?index='+index+ "&callback=app.callback",//请求地址
        id = "uploadIframe" + rand,//iframe的id
        ifr = jQuery("<iframe name='" + id + "' id='" + id + "' style='display:none'></iframe>");//这个很重要哦
        //这就是核心代码了，分部解读
        //iframe 是内嵌的的所以不会刷新页面，是实现ajax的常用方法。包括谷歌在内的很多产品上都是怎么搞的上传
        //优势不用说：兼容性好。
        jQuery(".J_upForm[data-index='" + index + "']")//选中from
        .attr("target", id)//target 要和 iframe 的id 一样哦
        .append(ifr)//iframe 来了
        .attr("action", url)//from提交地址
        .submit();//提交操作

        //防止上传失败，可以设置延时
        //这一步根据自己的需要去做
        that.config.upload[index] = setTimeout(function() {
            //页面操作
            //that.config.istimeout[index] = true;//默认是false ,超时设置成True
        },上传失败时间);
    },
    //上传成功回调
    callback:function(data){
         var that = this;
         if (that.config.istimeout[data.index]){//查看是否超时
                return false;
          }
         clearTimeout(that.config.upload[data.index]);//清楚延时
         if (data.code == '200'){
            //表示上传成功    
        }else{
            //表示上传失败
        }
    }
};
//dom加载完成后初始化
$(function(){
    app.init();
});
           

服务器返回信息实例,这个因该是设置格式为 html，不是json哦

<script type="text/javascript">
    document.domain="coolpad.com";//因为是内嵌的iframe,所以可以通过设置domain来跨域访问。
    parent.app.callback({"code":"200","index":"1","src":"图片地址"});
</script>