利用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>