javascript上传组件

先上效果图:

选择文件后会自动上传,做为一个div层显示在网页中

引入js代码

<script type="text/javascript" src="upload.js"></script>

这个upload.js的代码如下:

/*
 * JS上传 by Newmin
 * MSN:new.min@msn.com
 * http://mi.8866.org:2/
 */
var NewminFU = new upload();
function upload() {this.returnValue;}
upload.prototype.returnValue=this.returnValue;
upload.prototype.init = function (action, func, title) {
    var x = (document.body || document.documentElement).clientWidth;
    var y = (document.body || document.documentElement).clientHeight;
    var text = title || "文件上传";
    var dialog = document.createElement("div");
    dialog.style.cssText = "border:solid 1px #e5e5e5;200px;height:80px;background:white;overflow:hidden;" +
        "position:absolute;top:" + (y - 80) / 2 + "px;left:" + (x - 200) / 2 + "px;z-index:1;color:#969696;";
    dialog.innerHTML = "<div style='background:#f0f0f0;line-height:25px;font-weight:bold;color:black;padding-left:10px'>" +
        text + "</div><div><iframe name='newminfu_target' id='newminfu_target' style='display:none'></iframe>" +
        "<div style='height:20px;padding:10px;'><form id='newminfu_form' method='post' action='" + action +
        "'target='newminfu_target' enctype='application/www-form-urlencoded'><input type='file' " +
        "' style='display:none'/><a href='javascript:;'>选择文件</a><span/></form></div><div style='background:#f5f5f5;" +
        "height:15px;line-height:15px;overflow:hidden;font-size:10px;'>support at <a href='http://newmin.cnblogs.com'" +
        " target='_blank'>http://newmin.cnblogs.com</a></div>";
    document.body.appendChild(dialog);

    /* attach events */
    var ifr = document.getElementById("newminfu_target");
    var form = document.getElementById("newminfu_form");    /* 要提交文件的表单 */
    var tip = form.getElementsByTagName("span")[0];         /* 显示提示文本框的容器 */
    var bts = form.getElementsByTagName("a");               /* 获取触发事件的a */
    var file = bts[0].previousSibling;                      /* 文件input */
    bts[0].onclick = function () { file.click(); }
    file.onchange = function () {
        form.submit();
        var html;
        var t = setInterval(function () {
            try {
                html = newminfu_target.document.body.innerHTML;        /* 不跨域上传的时候 */
                if (html == '') html = null;                           /* 设置了document.domain的时候 */
            } catch (err) {
                //跨域的时候在action中写下如下代码
                //<script>document.domain='域';
                //window.parent.NewminFU.returnValue='返回内容';
                //</script>
                html = null;                                /*  跨域上传 */
            }
            if (html != '') {
                func(html);
                document.body.removeChild(dialog);
                clearInterval(t);
            }
        }, 10);
    }
}

由于实际工作中涉及到了跨域,所以在代码中也考虑到了跨域上传的问题,还可以通过iframe的属性打造一个上传进度条,

但这里没有

在要上传文件的页面中调用代码

<script>
        function upload() {
            NewminFU.init("uploadimg", function (x) {
                //跨域的时候返回null,在上传页面中设置了window.parent.returnValue
                //故可以直接使用NewminFu.returnValue;
                /* var returnValue = x == null ? NewminFu.returnValue : x;
                alert("上传的地址为:" + returnValue);*/
                alert(NewminFU.returnValue);
            }, "上传图片");
        }
</script>

然后在负责上传文件的页面中输出文件地址，这样才可以获取地址,这是在不跨域的情况下

如果设计到跨域则输出的代码应为如下:

<script type="text/javascript>
document.domain='';      //这里设置domain
window.parent.NewminFU.returnValue="文件地址";
</script>