利用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:6e4,//上传超时时间        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/(1024*1024) >5 ){                            alert("您上传的图片大于了5M，请用其他工具处理后再上传吧！");                            return false;                        }                    }                    //设置主域名                    document.domain = "coolpad.com";//跨域上传需要的东西在iframe中用得着                    that.doupload(index);//上传操作                }            });    },    //上传操作    doupload:function(index){        var that = this;        rand = Math.floor(Math.random() * 9999),//生产随机数        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>