/** *upload * */ $(function() { (function($) { "use strict"; $.fn.uploadFile = function(options) { var bool_validation = true; //是否要初始化validation if (options.validation == "null") { bool_validation = false; /* 改,去掉 "",去掉重复的,去掉大写的。Lin * 相应的
"; if (path) { form += ""; } form += ""; form += "
"; $("body").append(form); }); function onClick() { if(settings.beforeClick){ if(false==settings.beforeClick.call(this)){ return ; } } //var id = $(this).attr("id"); var name = settings.name; var path = $("input[name='" + name + "wj']").val(); $("[id='" + name + "path']").val(path); $("[id='" + name + "Edit_File']").click(); } //console.log(this.files[0].name); function onChange(e, finalsubmit) { var THIS = this; var filesLength = this.files.length; //用来判断是否选择文件 var fileSize = Math.round(this.files[0].size / 1024 * 100) / 100; if (filesLength > 0) { if (settings.validation != undefined && settings.validation != 'null' && settings.validation != null && settings.validation.length > 0) { var fileExt = this.files[0].name.replace(/.+\./, "").toLowerCase(); //console.log(fileExt); var flag = false; var filetype = settings.validation.split(","); //var filetype = settings.validation $.each(filetype, function() { /* 改,.validation 去掉 ""、去掉重复的、去掉大写的。Lin * 相应的 settings.size && settings.size > 0) { alert("上传文件大于" + settings.size + "KB"); return; } settings.onchange && settings.onchange.call(this, settings); var progressHtml = '
0%
', //进度条HTML fileid = $(this).attr("fileid"), //获取button的id $fileName = $("[id='"+ fileid +"BaseName']"), // + "Name']"),。Lin defaultOption = { //默认的参数,可进行自定义 type: 'post', dataType: 'json', beforeSubmit: function() { //console.log('beforeSubmit'); $('[id=\'' + fileid+'\']').attr('disabled', 'disabled'); $('[id=\'' + fileid+'\']').attr('class', 'disabled-button'); }, beforeSend: function() { //console.log('beforeSend'); $('[id=\'' + fileid + 'BaseName\']').empty(); // + 'Name\']').。Lin $('[id=\'' + fileid + 'BaseName\']').append(progressHtml); // + 'Name\']').。Lin var percentVal = '0%'; $('.bar').width(percentVal) $('.percent').html(percentVal); }, uploadProgress: function(event, positon, total, percentComplete) { //进度条 // console.log('uploadProgress'); var percentVal = percentComplete + '%'; $('.bar').width(percentVal) $('.percent').html(percentVal); }, success: function(result) { //ajax上传成功 var fileNames = ""; var paths = ""; var fileList = result.fileList; // console.log('result.size=' + result.fileList); for (var i = 0; i < fileList.length; i++) { fileNames += fileList[i].fileName; paths += fileList[i].path; if (i < fileList.length - 1) { fileNames += ";"; paths += ";"; } } //console.log('fileNames:'+fileNames); //console.log('paths:'+paths); // console.log('success'); var percentVal = '100%'; $('.bar').width(percentVal) $('.percent').html(percentVal); $('[id=\'' + fileid+'\']').removeAttr('disabled'); $('[id=\'' + fileid+'\']').attr('class', 'list-button'); /* 改, fileNames。Lin * 再改回 wj,并用回 paths,支持 "sltwj" $('input[name="' + fileid + 'wj"]').val(paths); //原取值方式为result.path 后改为result.fileList[0].path */ $('input[name="'+ fileid +'wj"]').val(paths); /// 再增加,。Lin $('[id=\'' + fileid + "path"+'\']').val(paths); //原取值方式为result.path 后改为result.fileList[0].path */ /* 再去掉,共用 wj。Lin $('input[name="'+ fileid +'FileName"]').val(paths); //原取值方式为result.path 后改为result.fileList[0].path */ $("[id='qx" + fileid+'\']').show(); $("[id='check" + fileid+'\']').show(); if (settings.callback != null && settings.callback != 'null' && settings.callback != undefined) settings.callback(result); }, error: function(result) { //console.log('error'); alert('上传失败'); $('[id=\''+ fileid +'BaseName'+'\']').html(''); // + 'Name'+'\']').。Lin $('[id=\'' + fileid + 'Edit_File'+'\']').removeAttr('disabled'); $('[id=\'' + fileid + 'Edit_File'+'\']').attr('class', 'list-button'); //console.log(result); } }, ajaxParam = $.extend({}, defaultOption, settings); //console.log(ajaxParam); if (ajaxParam.imageCropping && /\.(jpg|jpeg|png|)$/i.test(this.files[0].name)) { initCropper(THIS, ajaxParam, (function() { return function(result) { ajaxParam.success(result) } })()); // bySPACE 20190612 // 清空文件,防止多次上传同一张图片时无法被change捕获 $(this).val(""); } else { $('[id=\'' + formId+'\'').ajaxSubmit(ajaxParam); //调用from.js的ajax提交表单 } } } }; })(jQuery); }); /** * 裁剪 :) * bySPACE 20190604 */ var wdCropper = {}; function initWdCropper() { wdCropper = { topWin: undefined, layer: { // 弹层 show: function(param) { // 弹出 /* 再改,启用引入 .css、.js 语句 -- yx_zjz.js(迎新拍证件照) 时,会导致 resize( 里的 .Tdrag() 抛出异常 -- 没有引入 Tdrag.min.js。Lin * wdCropper.topWin.$("#space-cropper-panel").Tdrag(); * wdCropper.topWin.$("#cropper").Tdrag(); * 不能启用 wdCropper.layer.close(),会导致 上传 > 裁剪图片 时没显示裁剪窗口 * 另,下面的 close( 里,也启用清除 .css、.js 语句 //wdCropper.layer.close(); //wdCropper.topWin.$("html").append(''); //wdCropper.topWin.$("html").append(''); //wdCropper.topWin.$("html").append(''); */ wdCropper.topWin.$("html").append(''); wdCropper.topWin.$("html").append(''); wdCropper.topWin.$("html").append(''); var panelHtml = '
' + '
' + '
' + '' + '
' + '
' + '' + '
' + '
'; wdCropper.topWin.$("body").append('
'); wdCropper.topWin.$("body").append( ''); wdCropper.topWin.$("body").append( '' ); var cw = wdCropper.topWin.document.body.clientWidth, ch = wdCropper.topWin.document.body.clientHeight; if (!param) { // 默认全屏 param = { width: cw - 20, height: ch - 20 } } else { // 超出屏幕大小的话就默认全屏 if (param.width > cw || param.height > ch) { param = { width: cw - 50, height: ch - 50 } } } wdCropper.layer.resize({ width: param.width + 20, height: param.height + 40 }) wdCropper.topWin.$("#cropper").fadeIn(); }, resize: function(size) { // 重置大小,最小不能小于200*200 if (size) { if(size.width < 200) { size.width = 220; } if(size.height < 200) { size.height = 200; } } var c = wdCropper.topWin.$("#cropper"); $(c).width(size.width + "px"); $(c).height(size.height + "px"); $(c).css({ "top": ((wdCropper.topWin.document.body.clientHeight - size.height) / 2) + "px", "left": ((wdCropper.topWin.document.body.clientWidth - size.width) / 2) + "px" }); var b = wdCropper.topWin.$("#space-layer-body"); $(b).height(($(c).height() - 40) + "px"); $(b).width(($(c).width() - 20) + "px"); var p = wdCropper.topWin.$("#space-cropper-panel"); var t = (($(c).height() / 2) - 210); t = t < 40 ? 50 : t; $(p).css({ "top": t + "px", }); wdCropper.topWin.$("#space-cropper-panel").Tdrag(); wdCropper.topWin.$("#cropper").Tdrag(); }, fullIndex: 1, full: function(type) { // 全屏Tg if (wdCropper.layer.fullIndex == 1) { wdCropper.layer.fullScreen(); wdCropper.layer.fullIndex = 2; wdCropper.topWin.$(".icon-fullscreen").hide(); wdCropper.topWin.$(".icon-restore").show(); } else { wdCropper.layer.exitScreen(); wdCropper.layer.fullIndex = 1; // wdCropper.topWin.$(".icon-fullscreen").removeClass("icon-zoomOut"); wdCropper.topWin.$(".icon-fullscreen").show(); wdCropper.topWin.$(".icon-restore").hide(); } }, fullScreen: function() { // 全屏 var el = wdCropper.topWin.document.documentElement; var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen; if (typeof rfs != "undefined" && rfs) { rfs.call(el); }; return; }, exitScreen: function() { // 退出全屏 var d = wdCropper.topWin.document; if (d.exitFullscreen) { d.exitFullscreen(); } else if (d.mozCancelFullScreen) { d.mozCancelFullScreen(); } else if (d.webkitCancelFullScreen) { d.webkitCancelFullScreen(); } else if (d.msExitFullscreen) { d.msExitFullscreen(); } if (typeof cfs != "undefined" && cfs) { cfs.call(el); } }, close: function() { // 关闭 wdCropper.topWin.$("#shade").remove(); wdCropper.topWin.$("#cropper").remove(); wdCropper.topWin.$("#imgInfo").remove(); /* 再改,启用清除 .css、.js 语句 -- 上面的 show(,启用了引入 .css、.js 语句。Lin //wdCropper.topWin.$("html link[href='/wd/js/Cropper/cropper-master/dist/cropper.css']").remove(); //wdCropper.topWin.$("html script[src='/wd/js/Cropper/cropper-master/dist/cropper.js']").remove(); //wdCropper.topWin.$("html script[src='/wd/js/Cropper/drag/Tdrag.min.js']").remove(); */ wdCropper.topWin.$("html link[href='/ss/Cropper/cropper-master/dist/cropper.css']").remove(); wdCropper.topWin.$("html script[src='/ss/Cropper/cropper-master/dist/cropper.js']").remove(); wdCropper.topWin.$("html script[src='/ss/Cropper/drag/Tdrag.min.js']").remove(); wd.topWindow.$("#cropiframe").hide(); } }, cropper: { fileName: null, $image: undefined, // cropper实例,由init时赋值 changeflag: false, // 是否被拖动标记,如被拖动为真,否则为假 autoSizeFlag: 0, // 累计加载完毕次数 imageURL: undefined, // BASE64 图像 startInterval: undefined, // 连续操作的定时器对象 startIntervalType: undefined, // 连续操作的类型 rotatingNumber: 0, // 旋转度数 img: undefined, init: function() { // 通过指定的宽和高计算裁剪框比例,出现小数向上取整 var _widthRatio = 0, _heightRatio = 0, ratioFlag = false; if (wdCropper.settings.width && wdCropper.settings.height) { ratioFlag = true; _widthRatio = (wdCropper.settings.width / 100).toFixed(2); _heightRatio = (wdCropper.settings.height / 100).toFixed(2); } wdCropper.cropper.$image = wdCropper.topWin.$("#cropperImage"); wdCropper.cropper.$image.cropper({ aspectRatio: ratioFlag ? _widthRatio / _heightRatio : undefined, viewMode: 0, // 视点模式:【0:无限制;1:不能超出裁剪区域;】 dragMode: 'move', // 拖曳模式:'crop'*创建一个新的麦田盒,'move'*移动画布,'none'*无所事事 modal: true, // 是否显示黑色遮罩 guides: true, // 显示麦田盒上方的虚线。 center: true, // 显示位于“作物”框上方的中心指示器。 highlight: true, // 在“作物”框上方显示白色模式(突出显示“作物”框)。 background: true, // 是否显示透明背景 movable: false, // 是否可以移动图像 rotatable: true, // 可旋转 scalable: true, // 可伸缩 zoomable: true, // 可缩放 responsive: true, // 调整窗口大小时,重新渲染裁剪器 zoomOnWheel: false, // 通过移动鼠标使图像能够缩放 wheelZoomRatio: 0.1, // 定义缩放比率时,通过鼠标旋转放大图像。(滚动时放大或缩小的比例) cropBoxMovable: true, // 通过拖动启用移动“裁剪”框。 CropBoxResizable: false, // 可以通过拖动调整裁剪框的大小 crop: function(event) { // 移动开始时 try { if (!wdCropper.cropper.changeflag) { wdCropper.topWin.$("#imgInfo").show(); } var offset = wdCropper.topWin.$(".cat").offset(); if (offset != undefined) { wdCropper.topWin.$("#imgInfo").css({ "left": (offset.left + 30) + "px", "top": (offset.top - 9) + "px" }); } var d = wdCropper.cropper.$image.data('cropper').getData(); wdCropper.topWin.$("#width").html(Math.round(d.width)); wdCropper.topWin.$("#height").html(Math.round(d.height)); if (!wdCropper.settings.width) { wdCropper.topWin.$("#showSize").html("" + Math.round(d.width) + " X " + Math.round(d.height) + ""); } // 计算比例 wdCropper.cropper.getRatio(); } catch (e) { console.log(e); } return false; }, cropend: function() { // 移动停止时 wdCropper.topWin.$("#imgInfo").hide(); wdCropper.cropper.changeflag = false; }, ready: function() { // 渲染完毕时 wd.topWindow.wdCropper = wdCropper; wdCropper.cropper.initDragStyle(); wdCropper.topWin.$("#imgInfo").hide(); // 图片小于200*100就会被Cropper放大,接下来要做的就是把图片还原到原大小 var cd = wdCropper.cropper.$image.data('cropper').getCanvasData(); // 当前画布中的图片大小 var img = wdCropper.cropper.$image.data('cropper').getImageData(); // 图片实际大小 wdCropper.cropper.img = img; if (img.width < 200 || img.height < 200) { wdCropper.cropper.$image.data('cropper').setCanvasData({ width: img.naturalWidth, height: img.naturalHeight, left: (200 - img.naturalWidth) / 2, top: (200 - img.naturalHeight) / 2, }); } if (img) { wdCropper.cropper.getRatio(); } // setting中没有指定裁剪宽和高,就设置裁剪框和图片一样大 if (!wdCropper.settings.width) { var cd2 = wdCropper.cropper.$image.data('cropper').getCanvasData(); // 当前画布中的图片大小 wdCropper.cropper.$image.data('cropper').setCropBoxData({ "width": cd2.width, "height": cd2.height }) } // 解决部分屏幕初始化后裁剪框无法居中的问题 var w = wdCropper.cropper.$image.data('cropper').getContainerData().width; wd.topWindow.wdCropper.cropper.$image.data('cropper').setCropBoxData({ left: (w - wd.topWindow.wdCropper.cropper.$image.data('cropper').getCropBoxData().width) / 2 }); // setTimeout(function() { // }, 500); } }); }, keepTwoDecimal: function(num) { // 四舍五入,保留一位小数 return Math.round(num * 10) / 10; }, replace: function replace(url) { // 重新渲染裁剪框 wdCropper.cropper.imageURL = url; wdCropper.cropper.$image.data('cropper').replace(url, false); }, zoom: function() { // 放大 wdCropper.cropper.changeflag = true; var cd = wdCropper.cropper.$image.data('cropper').getCanvasData(); // 当前画布中的图片大小 var img = wdCropper.cropper.$image.data('cropper').getImageData(); // 图片实际大小 if (cd.width >= img.naturalWidth || cd.height >= img.naturalHeight) { wdCropper.topWin.$("#zoom_btn").removeClass("icon-zoomIn").addClass("disableIcon-zoomIn"); return false; } wdCropper.cropper.$image.cropper("zoom", 0.01); }, narrow: function() { // 缩小 wdCropper.cropper.changeflag = true; wdCropper.cropper.$image.cropper("zoom", -0.01); wdCropper.topWin.$("#zoom_btn").removeClass("disableIcon-zoomIn").addClass("icon-zoomIn"); }, ZN_auto: function(type) { // 连续放大或缩小 window.clearInterval(wdCropper.cropper.startInterval); type = wdCropper.cropper.startIntervalType = type; wdCropper.cropper.startInterval = setInterval(function() { if (type.trim() == 'z') { wdCropper.cropper.zoom(); } else { wdCropper.cropper.narrow(); } }, 100); }, rotate_left: function() { // 逆时针 wdCropper.cropper.rotatingNumber--; wdCropper.cropper.changeflag = true; wdCropper.cropper.$image.cropper("rotate", -1); wdCropper.topWin.$("#jd").html(wdCropper.cropper.rotatingNumber + "°"); }, rotate_right: function() { // 顺时针 wdCropper.cropper.rotatingNumber++; wdCropper.cropper.changeflag = true; wdCropper.cropper.$image.cropper("rotate", 1); wdCropper.topWin.$("#jd").html(wdCropper.cropper.rotatingNumber + "°"); }, endFlag: function() { // 结束循环 window.clearInterval(wdCropper.cropper.startInterval); }, RL_auto: function(type) { // 连续旋转 window.clearInterval(wdCropper.cropper.startInterval); type = wdCropper.cropper.startIntervalType = type; wdCropper.cropper.startInterval = setInterval(function() { if (type.trim() == 'l') { wdCropper.cropper.rotate_left(); } else { wdCropper.cropper.rotate_right(); } }, 100); }, getRatio: function() { // 获取图片缩放比例 try { var id = wdCropper.cropper.$image.data('cropper').getImageData(); //console.log("id=" + id) if (id && id.width) { var bl = wdCropper.cropper.keepTwoDecimal(id.width / wdCropper.cropper.img.width); wdCropper.topWin.$("#bl").html(bl == 1 ? "1:1" : bl); } } catch (e) { console.log(e); } }, initDragStyle: function() { // 初始化裁剪框 wdCropper.topWin.$("span.line-e").remove(); wdCropper.topWin.$("span.line-n").remove(); wdCropper.topWin.$("span.line-w").remove(); wdCropper.topWin.$("span.line-s").remove(); wdCropper.topWin.$("span.point-e").remove(); wdCropper.topWin.$("span.point-n").remove(); wdCropper.topWin.$("span.point-w").remove(); wdCropper.topWin.$("span.point-s").remove(); wdCropper.topWin.$("span.point-ne").remove(); wdCropper.topWin.$("span.point-nw").remove(); wdCropper.topWin.$("span.point-sw").remove(); wdCropper.topWin.$("span.point-se").addClass("cat plugin-drag"); wdCropper.topWin.$("span.point-se").mousemove(function() { wdCropper.cropper.changeflag = false; }); wdCropper.topWin.$(".cropper-modal").addClass("dialog-mask"); wdCropper.topWin.$(".cropper-view-box").addClass("area-div"); if (!wdCropper.settings.width) { var d = wdCropper.cropper.$image.data('cropper').getData(); wdCropper.topWin.$("#showSize").html("" + Math.round(d.width) + " X " + Math.round(d.height) + ""); } else { wdCropper.topWin.$("#showSize").html("" + wdCropper.settings.width + " X " + wdCropper.settings.height + ""); } wdCropper.topWin.$("#jd").html("0°"); }, getCroppedCanvas: function() { // 获取裁剪图片 var myForm = undefined; // 最终上传的表单 // 新增需求:裁剪框和图片大小一致的情况下,直接上传原图,不再进行裁剪操作 var canvasData = wdCropper.cropper.$image.data('cropper').getCanvasData(); // 画布大小 var cropBoxData = wdCropper.cropper.$image.data('cropper').getCropBoxData(); // 裁剪框大小 if (canvasData.width == cropBoxData.width && canvasData.height == cropBoxData.height) { //console.log("原图上传"); var myForm = new FormData(); myForm.append("application", ""); myForm.append("fileEdit", wdCropper.fileObj); } else { var hce = wdCropper.cropper.$image.data('cropper').getCroppedCanvas({ width: wdCropper.settings.width, height: wdCropper.settings.height, fillColor: '#FFF' }); var src = hce.toDataURL("image/jpeg"); var dataURLtoBlob = function(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); } var newFile = new File([dataURLtoBlob(src)], wdCropper.cropper.fileName); wdCropper.fileEle.files[0] = newFile; var myForm = new FormData(); myForm.append("application", ""); myForm.append("fileEdit", newFile); } //console.log(wdCropper.settings.action); $.ajax({ url: wdCropper.settings.action, type: "POST", data: myForm, processData: false, // 告诉jQuery不要去处理发送的数据 contentType: false, // 告诉jQuery不要去设置Content-Type请求头 error: function() { wdCropper.layer.close(); setTimeout(function() { this.wdCropper = undefined; wd.topWindow.wdCropper = undefined; }, 1000); }, success: function(result) { result = eval("(" + result + ")"); if (wdCropper.cropConfirm) { wdCropper.cropConfirm.call(wdCropper.thisWindow, result) } wdCropper.layer.close(); setTimeout(function() { this.wdCropper = undefined; wd.topWindow.wdCropper = undefined; }, 1000); } }); } } } } //裁剪 function initCropper(fileEle, settings, cropConfirm) { initWdCropper(); wdCropper.fileEle = fileEle; var files = fileEle.files; if (files && files.length) { if (!!!/^image\/\w+$/.test(files[0].type)) { window.alert('Please choose an image file.'); return } } else { return; } wdCropper.thisWindow = window; wdCropper.settings = settings; wdCropper.cropConfirm = cropConfirm; var file = files[0]; wdCropper.cropper.fileName = file.name; wdCropper.fileObj = file; //生成裁剪窗口 if(wd.topWindow){ wd.topWindow.$("#cropiframe").remove(); }else{ wd.topWindow = top; } var cropiframe = $( "" ) cropiframe.on("load", function() { wdCropper.topWin = this.contentWindow; var uploadedImageURL = URL.createObjectURL(file); var img = new Image(); img.onload = function() { wdCropper.layer.show({ width: img.width, height: img.height }); wdCropper.cropper.init(); wdCropper.cropper.replace(uploadedImageURL); } img.src = uploadedImageURL; }).appendTo(wd.topWindow.$("body")).show(); } function uploadFileClean(id) { $('#' + id + 'Name').html(''); $('input[name="' + id + 'wj"]').val(''); $('#' + id + 'Edit_File').val(''); $('#' + id + 'Edit_File').files = null; $('#' + id + 'path').val(''); $("#qx" + id).hide(); $("#check" + id).hide(); };