首頁 > 開發者 > JavaScript

javascript+iframe實現頁面無重新整理上傳功能

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

upload.html頁面如下


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>檔案上傳</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        html,body{
            background: transparent;
            overflow: hidden;
        }
    </style>
</head>
<body>
<form action="" enctype="multipart/form-data" method="post">
    <input type="file" name="upload" id="upload" style="width:100%;height:200px;">
</form>
</body>
</html>

frameupload.js代碼如下

/**
 * 將指定標籤[a或者button,input:button類比為檔案選擇按鈕, 選擇完成的檔案可以通過iframe上傳]
 * @author shiyangyang
 * @version 0.9.0
 * @module frameUpload
 * @since Chrome opera firefox & IE7+
 */
var FrameUpload = (function(require, exports, module){
    var uri = iframeUri = 'upload.html', index = 0;
    /**
     * CSS賦值
     * @param dom 操作的dom
     * @param style   將要賦值的屬性列表
     */
    var css = function(dom,style){
        for(var k in style){
            var v = style[k];
            if( /width|height|left|right|top|bottom|size|radius/i.test(k) && /^\d+$/.test(v) ){
                v += "px";      //含有這些字串的style屬性名稱支援一下純數字寫法
            }
            dom.style[k] = v;
            if( k === "opacity" ){
                dom.style.filter = "alpha(opacity=" + (v*100) + ")";    //相容一下IE的半透明效果
            }
        }
    };

    /**
     * @param el 渲染按鈕
     * @param change 修改file值觸發
     * @param
     */
    var Upload = function(opt){
        var _index = index++;
        var _this = this;
        var dom = this.el = opt.el, uri = opt.src || iframeUri;
        var style = {    //根據指定按鈕 的盒模型 定位新建立的標籤
            width   : dom.offsetWidth,
            height  : dom.offsetHeight,
            left    : dom.offsetLeft,
            top     : dom.offsetTop,
            border  : 0,
            position: 'absolute',
            opacity : 0
        };

        var frame = this.frame = (function(){
            var frame = document.createElement('iframe');
            frame.id = frame.name = "ajaxFrame-" + _index;
            frame.src = uri;
            css(frame,style);
            return frame;
        })();

        dom.parentNode.appendChild( frame );    //將iframe添加到指定按鈕父標籤下。

        setInterval(function(){
            var doc = frame.contentDocument;
            try{                                //若iframe關閉 關閉監聽
                doc = doc || document.frames["ajaxFrame-"+_index].document;
            }catch(e){
                return false;                  
            }
            var input = doc.getElementById('upload');
            if(input && !input.getAttribute('ajax-init') ){
                var form = input.parentNode;
                form.action = opt.action;
                _this.submit = function(){
                    if( !input.value ){
                        throw new Error('需要選擇檔案');
                    }
                    var xhr;
                    if( opt.ajax && (xhr = window.XMLHttpRequest ? new XMLHttpRequest() : {}).upload ){        //支援ajax2.0直接的檔案上傳帶進度
                        xhr.upload.addEventListener('progress',opt.onprocess);
                        xhr.onreadystatechange = function(e){
                            if (xhr.readyState == 4){
                                var json;
                                try{
                                    json = JSON.parse(xhr.responseText)
                                }catch(e){
                                    // is not a JSON result      
                                }
                                opt.afterUpload.call(frame,json,xhr);
                            }   
                        };
                        var formdata = new FormData(form);
                        xhr.open("POST", opt.action, true);
                        xhr.send(formdata);
                    }else{          //普通的表單檔案上傳需要重新整理頁面
                        frame.onload = function(){
                            var doc_ = frame.contentDocument || document.frames["ajaxFrame-"+_index].document;
                            if( typeof opt.afterUpload === 'function' ){
                                try{
                                    opt.afterUpload.call(frame, new Function("return "+doc_.body.innerHTML.replace(/[\r\n]+/,""))() );
                                }catch(e){
                                    alert(e);
                                }
                            }
                            frame.onload = null;
                            frame.src = uri;
                        };
                        form.submit();
                    }
                       
                };

                input.submit = _this.submit;
                for(var e in opt){  //事件綁定,所有on開始的key都綁定到input上面
                    if( 0 === e.indexOf("on") && typeof opt[e] === 'function' ){
                        input[e] = opt[e];
                    }
                }

                input.setAttribute('ajax-init','true');
                (typeof opt.ready === 'function') && opt.ready.call(input)
            }
        },200);


    };

    return Upload;

})();

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More