前端相关知识

       最近做的项目中，有个表单上需要上传多张图片，并对图片根据选取区域做裁剪预览，并且在表单提交之前需要做表单数据预览且预览之前需要校验所有表单项是否填写。

就这表单的功能，花了我在整个项目中大部分的时间，总结一下碰到的问题及解决方案。

1、文件上传，Jquery对input file控件的onchange事件即$("input[type=file]").change(function(){});只生效一次(现象：选择文件上传后，再次选择文件没有反应)；解决方案：$('#upFileList').delegate('input[type=file]','change',function(){});

delegate定义和用法 

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。 

参数	描述
childSelector	必需。规定要附加事件处理程序的一个或多个子元素。
event	必需。规定附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。

语法 
$(selector).delegate(childSelector,event,data,function)

返回值: jQuery delegate(selector,[type],[data],fn) 

2、裁剪图片,前端选用的是jquery cropper，刚开始存在跨域问题，图片显示不了；后来又获取裁剪坐标及高宽错误，导致裁剪出长方形（选取框是始终是正方形）。解决方法：checkImageOrigin:false,  //解决跨域问题；

//var cropBoxData = $imgContainer.cropper('getCropBoxData');
var getData = $imgContainer.cropper('getData');   
var x = getData.x;//cropBoxData.left;
var y = getData.y;//cropBoxData.top;
var width= getData.width;//cropBoxData.width;
var height = getData.height;//cropBoxData.height;

3、表单数据预览，刚开始在网上搜的window.open post提交方式代码比较原始，但IE11有问题。代码如下：

var tempForm = document.createElement("form");
    tempForm.id = "tempForm1";
    tempForm.method = "post";
    tempForm.action = url;
    tempForm.target=name;
    var hideInput1 = document.createElement("input");
    hideInput1.type = "hidden";
    hideInput1.name="xtid";
    hideInput1.value = data1;
    tempForm.appendChild(hideInput1); 
    if(document.all){
        tempForm.attachEvent("onsubmit",function(){});        //IE
    }else{
        var subObj = tempForm.addEventListener("submit",function(){},false);    //firefox
    }
    document.body.appendChild(tempForm);
    if(document.all){
        tempForm.fireEvent("onsubmit");
    }else{
        tempForm.dispatchEvent(new Event("submit"));
    }
    tempForm.submit();
    document.body.removeChild(tempForm);
}

IE11不兼容，后来同事帮改为jquery方式，兼容IE11，代码如下：

function postWindow(url,args,name){ 
//创建表单对象 
var _form = $("<form></form>",{ 
'id':'tempForm', 
'method':'post', 
'action':url, 
'target':name, 
'style':'display:none' 
}).appendTo($('body')); 

//将隐藏域加入表单 
_form.append($("<input>",{'type':'hidden','name':'json','value':args})); 
//触发提交事件 
_form.trigger('submit'); 
//表单删除 
_form.remove(); 
} 

4、表单数据预览前，验证数据，表单验证用的validform，想达到哪个控件验证不通过，则定位到此处。

代码如下：

 //表单基本元素验证
     var boo = $("#autoListingForm").Validform().check();
     if(!boo){
    $('.Validform_error')[0].focus();
    return false;
     } 
     var otherBoo = checkOther();
     if(!otherBoo){
    var otherTop = $('.Validform_wrong').offset().top;
    $('html, body').animate({scrollTop: otherTop-100}, 300);
    return false;
     }

在用Validform做验证时遇到点提交按钮没有任何反应的问题，很着急，觉得代码没错，后来才发现根据条件显示的文本框也加上nullmsg，这样也会验证，但当时隐藏了看不见，因此遇到问题，沉着冷静分析。像这种根据条件显示的文本框验证只能自己自定义datatype。

由于表单中有富文本框，用的CKEditor，当时版本是3.6.x，但IE11又不兼容，后来网上查了一下，升级CKEditor至4.5.6版本解决此问题，但里面上传图片的功能需要从本地上传，后来在config.js文件中配置了// 上传图片的地址
config.filebrowserImageUploadUrl = '/upload/uploadPic';后来由于功能太多，需要自定义toolbar， //ckeditor 初始化
        CKEDITOR.replace('content', {
        //toolbar:'default',
        toolbarGroups: [
{"name":"basicstyles","groups":["basicstyles"]},
{"name":"links","groups":["links"]},
{"name":"paragraph","groups":["list","blocks"]},
{"name":"document","groups":["mode"]},
{"name":"insert","groups":["insert"]},
{"name":"styles","groups":["styles"]},
{"name":"colors"}
],
        height : 400,
        width : 940
        });
        $('#content').val(CKEDITOR.instances.content.getData());

一个表单引发这么多的问题！以后还得多多学习jquery