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 +' '+ 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"); }