兼容ie9文件上传，及现代浏览器实现进度条

function fileSelect(target){
    var res = filtrate(target);
    if(res === false){        //当文件未选中或选择不合格(return false;)时不执行下一步
        return false;
    }
    $(".addFile>.file>span").html("+ Continue to add");
    upladFile();
}
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
var dirId = "";        //文件上传，删除时的参数
var file_max_size = null;    //限制总文件的大小
//文件选择
function filtrate(target,id) {
    var fileSize = 0;
    var filetypes =[".jpg",".png",".gif",".psd",".txt",".doc",".ppt",".xls",".pdf",".docx",".xlsx"];        //小写存放
    var filepath = target.value;        //文件路径
    var maxFileSize = 10 ;              //限制单个文件大小
    var filemaxsize = 1024 * maxFileSize;
    var files = $("#file")[0].files;    //获取的文件
//    IE上传文件
    if(window.ActiveXObject) {

        //var browser = navigator.appName;
        var b_version = navigator.appVersion;
        var ie_version = b_version.split(";");
        var trim_Version = ie_version[1].replace(/[ ]/g,"");
        if(trim_Version=="MSIE9.0" || trim_Version=="MSIE10.0"){
            var opt = {
                id: $("#file").attr("id"),
                frameName: "framename",
                url: "uploadAttachment",
                format: filetypes,
                callBack: function (data) {
                    dirId = JSON.parse(data);
                    dirId = dirId.dirId;
                }
            }
            ie_upload(opt,dirId);    //IE下上传文件
            return false;
        }
    }
    //禁止提交相同文件
    if(files){
        for(var i = 0; i < files.length; i++){
            var file_name = files[i].name;
            for(var j = -1; j < $(".show_file_name").length; j++){
                if(file_name==$(".show_file_name").eq(j).html()){
                    $.alert("The submission of the same file is not allowed");//不允许相同文件提交
                    return false;
                }
            }
        }
    }
    if(filepath && files){
        var isnext = false;
        var fileend = filepath.substring(filepath.lastIndexOf("."));    //截取文件后缀
        fileend = fileend.toLowerCase();    //文件后缀小写
        var fileCount = null;
        maxFileCount = 10;                //设置文件最多上传数量
        fileCount = files.length;        //实际上传文件的数量
        fileCount = $(".item_file").length + 1;        //实际上传文件的数量;length从零开始
        if(fileCount > maxFileCount){
            $.alert("File upload too many");
            return false;
        }

        //判断是否符合文件上传类型
        if(filetypes && filetypes.length>0){
            for(var i =0; i<filetypes.length;i++){
                if(filetypes[i]==fileend){
                    isnext = true;
                    break;
                }
            }
        }
        if(!isnext || !fileend){        //判断是否为所需上传类型
            alert("Don't accept this file type.");
            target.value ="";
            return false;
        }
    }else{
        return false;
    }


    var size = fileSize / 1024;//单位:kb
//            附件过大
    if(file_max_size + size >filemaxsize){
        $.alert("The total size of the attachment cannot be greater than"+filemaxsize/1024+"M!");
        target.value ="";
        return false;
    }else{
        file_max_size += size;//单位:kb
    }
//            附件大小为0
    /*
     if(size<=0){
     $.alert("Attachment size cannot be 0 M！");
     target.value ="";
     return false;
     }
     */


//    当前方法执行完成后执行下一步
    showFileName(files);

}
function ie_upload(opt,dir){
    /*
     参数说明:
     opt.id : 页面里file控件的ID;
     opt.frameName : iframe的name值;
     opt.url : 文件要提交到的地址;
     opt.format : 文件格式，以数组的形式传递，如['jpg','png','gif','bmp'];
     opt.callBack : 上传成功后回调;
     */
    var iName=opt.frameName; //太长了，变短点
    var iframe,form,file,fileParent;
    //创建iframe和form表单
    iframe = $('<iframe name="'+iName+'" id="' + iName + '" />');
    form = $('<form method="post" style="display: none;" target="'+iName+'" action="'+opt.url+'"  name="form_'+iName+'" enctype="multipart/form-data" />');
    file = $('#'+opt.id); //通过id获取flie控件

    fileParent = file.parent(); //存父级
    file.appendTo(form);
    form.append('<input type="hidden" name="csrfToken" id="csrfToken" value="" />');

//    if(opt["test"]){
    form.append('<input type="hidden" name="dirId" id="dirId" value="' + dir + '" />');
//    }
    // $("#csrfToken").appendTo(form);
    //插入body
    $("body").append(iframe).append(form);
    $("#csrfToken").val(getCookie("csrfToken"));


    //取得所选文件的扩展名
    var fileFormat=/.[a-zA-Z]+$/.exec(file.val())[0].substring(1);
    if(opt.format.join('-').indexOf(fileFormat)!=-1){
        form.submit();
        ie_showFileName(file.val());
    }else{
        file.appendTo(fileParent); //将file控件放回到页面
        iframe.remove();
        form.remove();
        $.alert("Don't accept this file type.");
    };

    //文件提交完后
    iframe.load(function(){
        var data = $(this).contents().find('body').html();
        file.appendTo(fileParent);
        iframe.remove();
        form.remove();
        opt.callBack(data);
    })
}
//ie文件名显示        待处理：文件大小限制
function ie_showFileName(tar){
    var tar_index = tar.lastIndexOf("\");
    var tar_val = tar.substring(tar_index+1);
    var filename = '';
    var tar_count = 10;        //IE下设置文件最多上传数量
    if(!tar){
        return false;
    }
    //IE下文件数量限制
    if($(".item_file").length >= tar_count){
        $.alert("File upload too many");
        return false;
    }
    //IE下禁止提交相同文件
    if(tar_val){
        var file_name = tar_val;
        for(var j = -1; j < $(".show_file_name").length; j++){
            if(file_name==$(".show_file_name").eq(j).html()){
                $.alert("The submission of the same file is not allowed");//不允许相同文件提交
                return false;
            }
        }
    }
    filename +="<div class='item_file'>" +
        "<span style='margin-right:10px;' class='show_file_name'>" +
        tar_val +
        "</span>"+
        "<span class='delete_file' onclick='deleteFile(this)' data-size=" +
        "size" +        //存储文件大小
        " title='delete'>delete</span>" +
        "</div>";

    $(".showFileName").append(filename);
}
//    文件名显示
function showFileName(files){
    var $showFileName = $(".showFileName");
    var filename = '';
    if(files.length){
        //显示上传的文件
        $.each(files,function(i,item){
            filename +="<div class='item_file'>" +
                "<span style='margin-right:10px;' class='show_file_name'>" +
                item.name +
                "</span>"+
                "(<span class='percentage'></span>)"+
                "<div class='uploading'>"+
                "<div class='progressBar' >"+
                "<div class='progressValue' ></div>"+
                "</div>" +
                "<span class='time'></span>"+
                "</div>"+
                "<span class='delete_file' onclick='deleteFile(this)' data-size=" +
                item.size +        //存储文件大小
                " title='delete'>delete</span>" +
                "</div>";
        })
        $showFileName.append(filename);

    }else{
        $showFileName.html(" ");
    }
}
//        文件删除
function deleteFile(that) {
    var fileName = $(that).closest('.item_file').find("span:first").html();
    $.ajax({
        url:"deleteAttachment",
        type:"get",
        data:{
            filename: fileName,
            dirId: dirId
        },
        success :function(data){
            dirId = data.dirId;
            file_max_size =file_max_size-$(that).attr("data-size")/1024;
            $(that).closest('.item_file').remove();
            if(data.dirId==''){
                $(".addFile>a.file>span").html("+ Add Attachment")
            }
        }
    })
}
var xhr;
var ot = 0;
var oloaded = 0;
//上传文件方法
function upladFile() {
    var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
//        var url = "uploadFile"; // 原生接收上传文件的后台地址
//            for(var i =0; i<fileObj.length;i++){
    upladFileItem(fileObj);
//            }

}
//        文件上传第一步
function upladFileItem(item){
    //文件大小
    var fileSize =item.size;//    文件大小
    var unit = 'b';//字节单位
    var unitSize = 1024;//字节转换单位 b
    if(fileSize/unitSize > 1){
        fileSize = fileSize/unitSize;
        unit = 'kb';
    }
    if(fileSize/unitSize > 1){
        fileSize = fileSize/unitSize;
        unit = 'M';
    }
    fileSize = fileSize.toFixed(2)+unit;        //单位转换后的文件大小
    $(".percentage:last").html(fileSize)//进度条百分比

    var form = new FormData(); // FormData 对象
    form.append("file", item); // 文件对象
    form.append("dirId", dirId); // 文件对象
//原生js

//            xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
//            xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
//            xhr.onload = uploadComplete; //请求完成
//            xhr.onerror =  uploadFailed; //请求失败
//            xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
//            xhr.upload.onloadstart = function(){//上传开始执行方法
//                ot = new Date().getTime();   //设置上传开始时间
//                oloaded = 0;//设置上传开始时，以上传的文件大小为0
//            };
//            xhr.send(form); //开始上传，发送form数据

//jq        请求与进度事件---------上传接口
    $.ajax({
        type: "POST",
        url: "uploadAttachment",
        data: form,//这里上传的数据使用了formData 对象
        processData : false,
        //必须false才会自动加上正确的Content-Type
        contentType : false ,

        //这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
        xhr: function(){
            var xhr = $.ajaxSettings.xhr();
            var res = 0;
            xhr.upload.onprogress=progressFunction; //文件上传进度
//    以下部分待测试
//                xhr.upload.onload = res = uploadComplete; //请求完成
//                xhr.upload.onerror =  uploadFailed; //请求失败
//                if(res){
//                    hiddenUploading(item);
//                }
            return xhr;
        },
        success :function(data){
            dirId = data.dirId;
            document.querySelector("#file").outerHTML = document.querySelector("#file").outerHTML    //清空#file选中的文件
        }
    });
}
//上传完成后隐藏进度条
function hiddenUploading(item){
    var name = item;
    var $showName = $(".showFileName").find(".item_file:last span:first");    //查找页面显示最近添加的文件
    if(name = $showName.html()){
        $showName.closest(".item_file").find(".uploading").hide();
    }
}

//上传进度实现方法，上传过程中会频繁调用该方法
function progressFunction(evt) {
    var $progressBar = $(".progressBar:last");
    var $progressValue = $(".progressValue:last");
    // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
    if (evt.lengthComputable) {
        var num = Math.round(evt.loaded / evt.total * 100); //转换百分比
        if(num == 100){
            hiddenUploading($progressBar);
        }
        num += "%";
        $progressValue.css('width', num)      //页面显示进度条
    }
    var time = $(".time:last");
    var nt = new Date().getTime();//获取当前时间
    var pertime = (nt-ot); //计算出上次调用该方法时到现在的时间差，单位为s
    ot = new Date().getTime(); //重新赋值时间，用于下次计算

    var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
    oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算
    //上传速度计算
    var speed = perload/pertime;//速度大小（初始单位： b/s）
    var bspeed = speed;
    var units = 'b/s';//单位名称
    if(speed/1024>1){
        speed = speed/1024;
        units = 'k/s';
    }
    if(speed/1024>1){
        speed = speed/1024;
        units = 'M/s';
    }
    speed = speed.toFixed(1);
    //剩余时间
    var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
//            speed   //速度
//            units     //  速度单位
//            resttime     //剩余时间
    $(".time:last").html(speed + units  +'&nbsp;&nbsp;&nbsp;&nbsp;'+  resttime +'s');      //显示速度，时间
    if(bspeed==0)
        $("#time:last").html( 'Upload Canceled' );
}
//上传成功响应
function uploadComplete(evt) {
    //服务断接收完文件返回的结果
    //    alert(evt.target.responseText);
    console.log(evt);

}
//上传失败
function uploadFailed(evt) {
    console.log("Upload Fail!");
}
//取消上传
function cancleUploadFile(){
    xhr.abort();
    console.log("Upload Canceled");
}