封装图片上传插件（用到html5技术）

//js:

function ie6scroll(box, h, wbox_h) {
    var box = box;//弹窗的div,例如.class/#id
    window.onscroll = function () {
        scrollT = $(document).scrollTop();//获取滚动条高度
        var top = (h - wbox_h) / 2 + scrollT;
        $(box).css("top", top + "px");
    }
}
function wbox(box) {
    var box = $(box);//弹窗的div,例如.class/#id
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;//浏览器窗口宽度
    var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//浏览器窗口高度
    var aw = document.body.scrollWidth;//网页正文宽度
    var ah = document.body.scrollHeight;//网页正文高度
    var scrollT = $(document).scrollTop();//获取滚动条高度
    var wbox_w = $(box).innerWidth();//弹出框宽度
    var wbox_h = $(box).innerHeight();//弹出框高度
    var bg_w = w;
    var bg_h = h;
    var left = (w - wbox_w) / 2;
    var top = (h - wbox_h) / 2 + scrollT;
    if (ah > h) {
        bg_w = aw;
        bg_h = ah;
    }
    $(".wbox").css({ "top": top + "px", "left": left + "px" });
    $(".wbox_bg").css({ "display": "block", "width": bg_w + "px", "height": bg_h + "px" });
    $(box).css("display", "block");
    ie6scroll(box, h, wbox_h);
}

function boxClose(box) {
    var box = box;//弹窗的div,例如.class/#id
    $(".wbox_bg").css("display", "none");
    $(box).css("display", "none");
}

var FileUpload_Config = {
    RequestUrl: "/Home/UploadFile",
    ParamName: "file",
    ProgressWidth: 400,
    ProgressHeight: 50,
    ProgressZIndex: 9999,
    FileFormat: ["png", "jpeg", "jpg", "gif", "mp4"],
    FileMaxSize: 10,
    ImgCompressionEnable: true,
    ProcessBackgroundImage: "./js/lib/FileUpload/bak.png",
    ProgressImage: "./js/lib/FileUpload/pro.png",
    OtherParams:{},
    beforeStart: function () {

    },
    onStart: function () {

    },
    onComplete: function (responseText) {

    },
    onSuccess: function () {

    },
    onFailed: function (responseText) {

    },
    onError: function () {

    }
};



var FileUpload = {
    Init: function (cfg) {
        if (cfg.id) {
            var btn = document.getElementById(cfg.id);
            if (btn.attachEvent)
                btn.attachEvent('onclick', FileUpload.GoUpload);
            else
                btn.addEventListener('click', FileUpload.GoUpload);

        }

        FileUpload_Config.RequestUrl = cfg.RequestUrl || FileUpload_Config.RequestUrl;
        FileUpload_Config.ParamName = cfg.ParamName || FileUpload_Config.ParamName;
        FileUpload_Config.ProgressWidth = cfg.ProgressHeight || FileUpload_Config.ProgressWidth;
        FileUpload_Config.ProgressHeight = cfg.ProgressHeight || FileUpload_Config.ProgressHeight;
        FileUpload_Config.ProgressZIndex = cfg.ProgressZIndex || FileUpload_Config.ProgressZIndex;
        FileUpload_Config.FileFormat = cfg.FileFormat || FileUpload_Config.FileFormat;
        FileUpload_Config.FileMaxSize = cfg.FileMaxSize || FileUpload_Config.FileMaxSize;
        FileUpload_Config.ImgCompressionEnable = cfg.ImgCompressionEnable || FileUpload_Config.ImgCompressionEnable;
        FileUpload_Config.ProcessBackgroundImage = cfg.ProcessBackgroundImage || FileUpload_Config.ProcessBackgroundImage;
        FileUpload_Config.ProgressImage = cfg.ProgressImage || FileUpload_Config.ProgressImage;
        FileUpload_Config.OtherParams = cfg.OtherParams || FileUpload_Config.OtherParams;
        FileUpload_Config.beforeStart = cfg.beforeStart || FileUpload_Config.beforeStart;
        FileUpload_Config.onStart = cfg.onStart || FileUpload_Config.onStart;
        FileUpload_Config.onComplete = cfg.onComplete || FileUpload_Config.onComplete;
        FileUpload_Config.onSuccess = cfg.onSuccess || FileUpload_Config.onSuccess;
        FileUpload_Config.onFailed = cfg.onFailed || FileUpload_Config.onFailed;
        FileUpload_Config.onError = cfg.onError || FileUpload_Config.onError;


        if (!document.getElementById('UploadProcess')) {
            var bakImg = "";
            var proImg = "";
            if (FileUpload_Config.ProcessBackgroundImage)
                bakImg = "background-image:url(" + FileUpload_Config.ProcessBackgroundImage + ") ;";
            if (FileUpload_Config.ProgressImage)
                proImg = "background-image:url(" + FileUpload_Config.ProgressImage + ");";

            var ProcessPercentTop = FileUpload_Config.ProgressHeight + 1;
            var ProcessTextTop = FileUpload_Config.ProgressHeight * -1;
            var margin = (FileUpload_Config.ProgressHeight * -1) + " 0 0 " + (FileUpload_Config.ProgressWidth / 2 * -1);

            var htmlstr = "<div class=\"wbox_bg\" style=\"display:none;\"></div>"
                        + "<div id=\"UploadBox\" class=\"wbox wbox0\">"
                        + "<div class=\"wbox_content\">"
                        + "<div id=\"UploadBoxContent\" class=\"wbox_c\"></div>"
                        + "</div>"
                        + "</div>";

            $(htmlstr).appendTo($(document.body));



            htmlstr = "<div id=\"UploadProcess\" style=\"z-index:" + (FileUpload_Config.ProgressZIndex +100)+ "\">"
                        + "<div id=\"ProcessPercent\" style=\"position:relative;top:" + (ProcessPercentTop - 1) + "px;left:0px;width:1px;height:" + FileUpload_Config.ProgressHeight + "px;display:none;" + proImg + "z-index:" + (FileUpload_Config.ProgressZIndex + 102) + "\"></div>"
                        + "<div id=\"ProcessBackground\" style=\"position:relative;width:" + FileUpload_Config.ProgressWidth + "px;height:" + FileUpload_Config.ProgressHeight + "px;" + bakImg + "z-index:" + (FileUpload_Config.ProgressZIndex + 101) + "\"></div>"
                        + "<div id=\"ProcessText\" style=\"position:relative;top:" + ProcessTextTop + "px;width:" + FileUpload_Config.ProgressWidth + "px;height:" + FileUpload_Config.ProgressHeight + "px;text-align:center;font-family:微软雅黑;line-height:" + FileUpload_Config.ProgressHeight + "px;z-index:" + (FileUpload_Config.ProgressZIndex + 103) + "\">0%</div>"
                        + "</div>";
            if (!FileUpload_Config.ProcessBackgroundImage || !FileUpload_Config.ProgressImage)
                htmlstr = "<div id=\"UploadProcess\" style=\"position:absolute;top:50%;left:50%;margin:" + margin + ";z-index:" + FileUpload_Config.ProgressZIndex + "\">"
                        + "<div id=\"ProcessPercent\" style=\"position:relative;top:" + ProcessPercentTop + "px;left:1px;width:1px;height:" + FileUpload_Config.ProgressHeight + "px;background-color:#ea5504;display:none;z-index:" + FileUpload_Config.ProgressZIndex + 2 + "\"></div>"
                        + "<div id=\"ProcessBackground\" style=\"position:relative;width:" + FileUpload_Config.ProgressWidth + "px;height:" + FileUpload_Config.ProgressHeight + "px;border:solid 1px #ea5504;z-index:" + FileUpload_Config.ProgressZIndex + 1 + "\"></div>"
                        + "<div id=\"ProcessText\" style=\"position:relative;top:" + ProcessTextTop + "px;width:" + FileUpload_Config.ProgressWidth + "px;height:" + FileUpload_Config.ProgressHeight + "px;text-align:center;valign:middle;line-height:" + FileUpload_Config.ProgressHeight + "px;z-index:" + FileUpload_Config.ProgressZIndex + 3 + "\">0%</div>"
                        + "</div>";


            $(htmlstr).appendTo($('#UploadBoxContent'));

            if (!document.getElementById('UploadStatus')) {
                var statusStr = "<div id=\"UploadStatus\" style=\"display:none\">0</div>";
                $(statusStr).appendTo($(document.body));
            }
        }
    },
    UpdateProcess: function (percent) {
        if (percent == 100)
            percent = 100;
        if (document.getElementById("UploadBox").style.display != "block")
            wbox("#UploadBox");

        if (document.getElementById('ProcessPercent').style.display == "none")
            document.getElementById('ProcessPercent').style.display = "block";

        document.getElementById('ProcessText').innerHTML = "正在上传 " + percent + "%";
        var totalWidth = FileUpload_Config.ProgressWidth;
        var currWidth = parseInt(percent / 100 * totalWidth);

        document.getElementById('ProcessPercent').style.width = currWidth + "px";


    },
    UploadFile: function (file) {
        if (!file)
            file = document.getElementById('FileUpload_InputFile').files[0];

        if (FileUpload_Config.ImgCompressionEnable) {
            var cvs = document.createElement('canvas');
            var img = new Image;
            img.src = FileUpload.getObjectURL(file);
            img.onload = function () {
                var img2 = new Image;
                cvs.width = img.naturalWidth;
                cvs.height = img.naturalHeight;
                var ctx = cvs.getContext('2d');
                ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
                file = cvs.toDataURL("image/png");
            }
        }

        var arr = file.name.split('.');
        if (FileUpload_Config.FileFormat.indexOf(arr[arr.length - 1].toLowerCase()) == -1) {
            alert("文件格式不正确");
            return;
        }
        if (file.size > FileUpload_Config.FileMaxSize * 1024 * 1024) {
            alert("文件大小不能超过" + FileUpload_Config.FileMaxSize + "M");
            return;
        }

        FileUpload.UpdateProcess(0);

        (function (file) {
            var xhr = new XMLHttpRequest();
            if (xhr.upload) {
                // 上传中
                xhr.upload.addEventListener("progress", function (e) {
                    if ($('#UploadStatus').html() != "1") {
                        return;
                    }
                    FileUpload.ShowProgress(e.loaded, e.total);
                }, false);

                // 文件上传成功或是失败
                xhr.onreadystatechange = function (e) {
                    switch (xhr.readyState) {
                        case 4:
                            if (xhr.status == 200) {
                                FileUpload.ClearFile();
                                FileUpload_Config.onComplete(xhr.responseText);
                                var data = JSON.parse(xhr.responseText);
                                $('#UploadStatus').html("0");
                                FileUpload.ShowResult(data.result, data);

                            } else {
                                FileUpload.ClearFile();
                                $('#UploadStatus').html("0");
                                FileUpload.ShowResult(false, xhr.responseText);
                            }
                            break;
                        case 1:
                            FileUpload_Config.onStart();
                            break;
                        case 0:
                            FileUpload_Config.beforeStart();
                            break;
                        default:
                            break;
                    }
                };

                var fd = new FormData();
                fd.append(FileUpload_Config.ParamName, file);
                for (var p in FileUpload_Config.OtherParams) {
                    fd.append(p, FileUpload_Config.OtherParams[p]);
                }

                // 开始上传
                xhr.open("POST", FileUpload_Config.RequestUrl, true);
                //xhr.setRequestHeader("Content-Type", "multipart/form-data;");
                //xhr.overrideMimeType("application/octet-stream");
                //xhr.setRequestHeader("filename", file.name);
                xhr.send(fd);

                $('#UploadStatus').html("1");

                //    xhr.send(file);
            }
        })(file);

    },
    UploadFileMultiple: function (files) {

        if (!files)
            files = document.getElementById('FileUpload_InputFile').files;
        for (var i=0;i<files.length;i++) {
            var file = files[i];
            var arr = file.name.split('.');
            if (FileUpload_Config.FileFormat.indexOf(arr[arr.length - 1].toLowerCase()) == -1) {
                alert("包含格式不正确的文件");
                return;
            }
            if (file.size > FileUpload_Config.FileMaxSize * 1024 * 1024) {
                alert("单个文件大小不能超过" + FileUpload_Config.FileMaxSize + "M");
                return;
            }
        }

        FileUpload.UpdateProcess(0);

        (function (files) {
            var xhr = new XMLHttpRequest();
            if (xhr.upload) {
                // 上传中
                xhr.upload.addEventListener("progress", function (e) {
                    if ($('#UploadStatus').html() != "1") {
                        return;
                    }
                    FileUpload.ShowProgress(e.loaded, e.total);
                }, false);

                // 文件上传成功或是失败
                xhr.onreadystatechange = function (e) {
                    switch (xhr.readyState) {
                        case 4:
                            if (xhr.status == 200) {
                                FileUpload.ClearFile();
                                FileUpload_Config.onComplete(xhr.responseText);
                                var data = JSON.parse(xhr.responseText);
                                $('#UploadStatus').html("0");
                                FileUpload.ShowResult(data.result, data);

                            } else {
                                FileUpload.ClearFile();
                                $('#UploadStatus').html("0");
                                FileUpload.ShowResult(false, xhr.responseText);
                            }
                            break;
                        case 1:
                            FileUpload_Config.onStart();
                            break;
                        case 0:
                            FileUpload_Config.beforeStart();
                            break;
                        default:
                            break;
                    }
                };

                var fd = new FormData();
                for (var j = 0; j < files.length; j++) {
                    fd.append(FileUpload_Config.ParamName+j.toString(), files[j]);
                }
                for (var p in FileUpload_Config.OtherParams) {
                    fd.append(p, FileUpload_Config.OtherParams[p]);
                }

                // 开始上传
                xhr.open("POST", FileUpload_Config.RequestUrl, true);
                //xhr.setRequestHeader("Content-Type", "multipart/form-data;");
                //xhr.overrideMimeType("application/octet-stream");
                //xhr.setRequestHeader("filename", file.name);
                xhr.send(fd);

                $('#UploadStatus').html("1");

                //    xhr.send(file);
            }
        })(files);

    },
    ShowProgress: function (loaded, total) {
        //var eleProgress = _this.find('#' + file.index + 'file .progress');
        var percent = (loaded / total * 100).toFixed(2);

        FileUpload.UpdateProcess(percent);
        //SetProgress(percent);
        //drawProcess(parseInt(percent));
        // eleProgress.find('.progressbar').css('width',percent);
        // if(total-loaded<500000){loaded = total;}//解决四舍五入误差
        // eleProgress.parents('li').find('.progressnum').html(formatFileSize(loaded)+'/'+formatFileSize(total));
    },
    GoUpload: function () {
        if (!document.getElementById('UploadStatus')) {
            var statusStr = "<div id=\"UploadStatus\" style=\"display:none\">0</div>";
            $(statusStr).appendTo($(document.body));
        }

        if ($('#UploadStatus').html() != "0")
            return;

        if (!document.getElementById('FileUpload_InputFile'))
            $("<div style=\"display:none\"><input id=\"FileUpload_InputFile\" type=\"file\" οnchange=\"FileUpload.UploadFile()\"/></div>").appendTo($(document.body));

        document.getElementById('FileUpload_InputFile').click();
    },
    ClearFile: function () {
        var obj = document.getElementById('FileUpload_InputFile');
        if (obj)
            obj.outerHTML = obj.outerHTML;
    },
    ShowResult: function (res, data) {
        boxClose('#UploadBox');
        $('#UploadStatus').html("0");
        if (res) {
            $('#ProcessText').html("上传成功");
            FileUpload_Config.onSuccess(data);
        }
        else {
            $('#ProcessText').html("上传失败");
            FileUpload_Config.onFailed(data);
        }
    },
    ImageCompression: function (file) {
        //var srcJ = new Array();//定义三变量用于装载参数
        //var srcI = new Array();
        //var srcIName = new Array();//同步装载上传图片的name
        //var srcIGif = new Array();
        var imgInfoCp = function () {
            this.name = "";
            this.size = 204800;
        };
        var getObjectURL = function (file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        };

        var minCpmpSize = 153600;//约为150kB,当上传图片size比此小时就不用压缩
        //var j = 0;
        //var k = j;

        var cout = "";
        //srcI[j] = getObjectURL(file);
        var imgageUrl = getObjectURL(file);
        var imageInfoCp = new imgInfoCp();
        imageInfoCp.name = file.name;
        imageInfoCp.type = file.type;
        imageInfoCp.size = file.size;
        //图片时fig时使用fileReader 不压缩
        if (file.type == 'image/gif') {
            var fileRead = new FileReader(file);
            fileRead.onload = function (event) {
                //srcJ[k] = event.target.result;
                imgageUrl = event.target.result;
            };
            fileRead.readAsDataURL(file);//
        }

        var img = new image;
        img.src = imgageUrl;

        //srcIName.push(imageInfoCp);
        //var imageUrl; 
        //imageUrl = srcI[j];
        //var srcTemp_j = new Array;
        //srcTemp_j[i] = new Image;
        //srcTemp_j[i].src = srcI[k + i];
        //srcTemp_j[i].onload = function () {
        //    var cvs = document.createElement('canvas');
        //    var img = new Image; img.src = srcI[k];
        //    cvs.width = img.naturalWidth;
        //    cvs.height = img.naturalHeight;
        //    var ctx = cvs.getContext('2d');
        //    ctx.drawImage(img, 0, 0, cvs.width, cvs.height);

        //    if (srcIName[k].size > minCpmpSize) {
        //        if (srcIName[k].type == 'image/png')
        //            srcJ[k] = cvs.toDataURL('image/png', 0.6);
        //        else if (srcIName[k].type == 'image/gif');
        //        else if (srcIName[k].type == 'image/jpeg') srcJ[k] = cvs.toDataURL('image/jpeg', 0.6);
        //        else srcJ[k] = cvs.toDataURL(srcIName[k].type, 0.6);
        //    } else {
        //        if (srcIName[k].type == 'image/png')
        //            srcJ[k] = cvs.toDataURL('image/png', 0.9);
        //        else if (srcIName[k].type == 'image/gif');
        //        else if (srcIName[k].type == 'image/jpeg') srcJ[k] = cvs.toDataURL('image/jpeg', 0.9);
        //        else srcJ[k] = cvs.toDataURL(srcIName[k].type, 0.9);
        //    }
        //    $.jsonpGet({
        //        url: "/BuildingInfo/UploadBuildingBanner",
        //        data: { BuildId: bmess.BuildingId, Filename: srcIName[k].name, ImageData: srcJ[k] },
        //        async: false,
        //        callbackName: "UploadBuildingBanner",
        //        fun: function (e) {

        //            $("#ImagePath").attr("src", e.data[0].ImagePath);
        //            window.localStorage.setItem("ImagePath", e.data[0].ImagePath)
        //            console.log(bmess.imagePath);

        //        },
        //        error: function (data) {
        //            $.tipalart({
        //                content: data.msg
        //            });
        //        }
        //    });
        //}
    },
    getObjectURL: function (file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    },
    UploadFileAsString: function (mothed, url, params) {
        var percent=0;
        var timer = setInterval(function () {
            if (percent >= 99) {
                clearInterval(timer);
                return;
            }

            percent++;
            FileUpload.UpdateProcess(percent);

        }, 1000);
        var request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            switch (request.readyState) {
                case 4:
                    clearInterval(timer);
                    percent = 100;
                    FileUpload.UpdateProcess(percent);

                    if (request.status == 200) {
                        var data = JSON.parse(request.responseText);
                        if (data.result)
                            FileUpload.ShowResult(true, data.data);
                        else
                            FileUpload.ShowResult(false, data);
                    }
                    else
                        FileUpload.ShowResult(false, request.responseText);

                    break;
                default:
                    break;
            }
        };

        //url+="?";
        //for(var p in params){
        //    url+=p+"="+params[p]+"&";
        //}
        //url=url.substring(0,url.length);
        request.open(mothed, url, true);
        request.send(JSON.stringify(params));
    }
};

//css

 .FileUpload_Center {margin: 50px auto;width: 400px;}
 .FileUpload_loading {width: 397px;height: 49px;background: url(./Image/bak.png) no-repeat;}
 .FileUpload_loading div {width: 0px;height: 48px;background: url(./Image/pro.png) no-repeat;color: #fff;text-align: center;font-family: Tahoma;font-size: 18px;line-height: 48px;}
 .FileUpload_message {width: 200px;height: 35px;font-family: Tahoma;font-size: 12px;background-color: #d8e7f0;border: 1px solid #187CBE;display: none;line-height: 35px;text-align: center;margin-bottom: 10px;margin-left: 50px;}
 .wbox_bg{ display:none; z-index:8888; position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.3; _height:expression(document.documentElement.clientHeight); _width:expression(document.documentElement.clientWidth);}
 .wbox{ display:none; z-index:9999; position:absolute; left:50%; top:50%; overflow:hidden;}
.wbox_content{ float:left; width:100%;}
.wbox_c{ padding:8px;}