zoukankan      html  css  js  c++  java
  • 兼容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");
    }
  • 相关阅读:
    java的第八次作业
    软件工程第三次作业——关于软件质量保障初探
    java的第七次作业
    java的第六次作业
    20194688 自动生成四则运算题第一版报告
    软件工程第一次作业
    vertical-align
    行高(line-height)
    文本对齐方式(text-align)
    文字样式属性
  • 原文地址:https://www.cnblogs.com/zhou195/p/7484563.html
Copyright © 2011-2022 走看看