现在位置首页 / 前端开发 /正文

a/button/input模拟文件上传浏览按钮进行文件上传插件

作者: IT小兵 | 2015年6月10日| 热度:℃ | 评论: |参与:

将指定标签[a或者button,input:button模拟为文件选择按钮, 选择完成的文件可以通过iframe上传.

插件代码:

/**
 * 将指定标签[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;
})();

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:400px;height:30px;">
</form>
</body>
</html>


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询