总结：
表单里上传文件时要写enctype="multipart/form-data"，不上传文件可以不写，但是method="post/get"一定要写，不然提交不了。
另外注意：
（1）<input type="file" accept="image/png"/>中的accept属性筛选的图片格式多的话，会有很长的延迟；
（2）target="picIframe"该属性是为了隐藏跳转的页面，跳转到<iframe name=picIframe width=0 height=0></iframe>中，而iframe标签是隐藏的。
（3）表单里的input标签的name属性，其属性值不能用nodeName，否则chrome浏览器会引起jq内部报错。
（4）用ajax提交表单的话，可以避免页面跳转，action那可以写：javascript:void(0)；注意后台的写法可能不一样。数据传输可以使用FormData对象，来减少拼接字符串的的工作量，具体如下面实例4。
（5）表单数据序列化，具体如下面实例5。
-----------------------------------------------
示例：<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
function submitForm() {
if (validate()) {
document.getElementByIdx_x("myForm").submit();
}
}
</script>
<body>
<form action="http://www.jb51.net" id="myForm">
<input type="text"/>
<input type="button" value="submitBtn" οnclick="submitForm();"/> <!—也可以使用
document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
</form>
</body>
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同
-----------------------------------------------
1.html代码：
<form action="../picUpload/uploafile.do" method="post" class="picWrap" name="picForm" enctype="multipart/form-data" id="picForm" target="picIframe">
<div class="picHeader">
<p>添加楼宇图片</p>
<p class="picCancel">x</p>
</div>
<div class="picCenter">
<div class="uploadingPic">
<div class="building">
<p>
<select class="sec1" name="picBuildings">
<option value="0" class="hide1">请选择楼宇</option>
</select>
</p>
<p id="building"></p>
<input type="file" name="0"/>
</div>
<div class="housing">
<p>
<select class="sec2" name="picHousings">
<option value="0" class="hide2">请选择小区</option>
</select>
</p>
<p id="housing"></p>
<input type="file" name="1"/>
</div>
</div>
<div class="picsWrap">
<div class="pics1 pics">
<div class="hnum">
<p>楼号</p>
<p id="hnum"></p>
<input type="file" name="2"/>
</div>
<div class="element">
<p>单元</p>
<p id="element"></p>
<input type="file" name="3"/>
</div>
<div class="floor">
<p>楼层</p>
<p id="floor"></p>
<input type="file" name="4"/>
</div>
<div class="house">
<p>房间</p>
<p id="house"></p>
<input type="file" name="5"/>
</div>
</div>
<div class="pics2 pics">
<div class="outdoor">
<p>室外</p>
<p id="outdoor"></p>
<input type="file" name="6"/>
</div>
<div class="garage">
<p>地下车库</p>
<p id="garage"></p>
<input type="file" name="7"/>
</div>
<div class="addArea">
<p>增加区域</p>
<p id="addArea"></p>
<input type="file" name="8"/>
</div>
</div>
</div>
</div>
<div class="picFooter">
<input type="text" name="node" value="" class="node">
<iframe name=picIframe width=0 height=0></iframe>
<button class="picCancel" id="picCancel">取消</button>
<button id="confirm">确定</button>
</div>
</form>
2.js代码：
$('#confirm').on('click',function(){//确定上传
if($('.sec1').val()==0 || $('.sec2').val()==0){
alert('请选择楼宇和小区!');
}else{
var bNodeId;
var hNodeId;
for (var i = 0; i < bData.length; i++){
if(bData[i].nodeName == $('.sec1').val()){
bNodeId = bData[i].nodeId;
break;
}
}
for (var i = 0; i < hData.length; i++){
if(hData[i].nodeName == $('.sec2').val()){
hNodeId = hData[i].nodeId;
break;
}
}
$('.node').val(bNodeId+'/'+hNodeId +'/');
$('.picWrap').css('zIndex','0').hide();
$(".bodybox").hide();
$('.pics div p:nth-child(2)').empty();
$('.uploadingPic div p:nth-child(2)').empty();
$('#picForm').submit();//表单提交
}
});
3.清除form中数据
调用示例：clearForm($('#editForm'));
function clearForm(form) {
// iterate over all of the inputs for the form
// element that was passed in
$(':input', form).each(function() {
var type = this.type;
var tag = this.tagName.toLowerCase(); // normalize case
// it's ok to reset the value attr of text inputs,
// password inputs, and textareas
if (type == 'text' || type == 'password' || tag == 'textarea')
this.value = "";
// checkboxes and radios need to have their checked state cleared
// but should *not* have their 'value' changed
else if (type == 'checkbox' || type == 'radio')
this.checked = false;
// select elements need to have their 'selectedIndex' property set to -1
// (this works for both single and multiple select elements)
else if (tag == 'select')
//this.find("option:selected").attr("selected","");
this.selectedIndex =-1;
});
}
4.ajax提交表单数据方式
var abimForm = $("#abimAmendForm")[0];//jq与js之间转换 id是表单id
var formData = new FormData(abimForm);
$.ajax({
url:'../syBuildManage/updateBuildingInfo',
type:'post',
data:formData,
dataType:'json',
processData: false,//不处理发送的数据，因为data值是FormData对象，不需要对数据做处理
contentType: false,//不设置Content-type请求头
success:function(data){
if(data == 1){
window.location.reload();//刷新页面
}
},
error : function(){
alert("添加错误");
}
});
5.表单数据序列化
可减轻前端的工作量
http://www.w3school.com.cn/jquery/ajax_serialize.asp
http://www.w3school.com.cn/jquery/ajax_serializearray.asp
模拟序列化，实际还是以对象的形式传参的函数：
$.fn.serializeObject = function() { //自定义jq函数
var o = {};
var a = this.serializeArray(); //表单数据，每个input框的数据封装成一个对象，所有对象存在一个数组里面。
$.each(a, function() { //遍历a数组，把所有数据以键值对的形式存在一个对象里面
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
调用：var v = JSON.stringify($("#editForm").serializeObject());//表单里的input必须都命名name，并且要和后台要的字段一样
6.校验表单里输入框是否为空：
var reg = /^[\s]*$/;
var nameM = $('#moduleName').val();
var curl = $('#curl').val();
if(nameM.length == 0 || curl.length == 0 || reg.test(nameM) || reg.test(curl)){
alert('模块名和链接必须填写！');
}else{}
7.有关option的selected属性和input（checkbox）的checked属性，单一选择
如果需求中只需要选中很多option或者input（checkbox）中的一个，可以不用循环来判断，直接写
$('.role option:selected').val();
$('.role input:checked').val();
8.判断表单里的小数点和数字和空格
//判断form中数据是否符合要求
function judgeForm(form){
var tag = false;//为true时，说明数据不符合要求
var str = '';//提示信息
var regSpace = /\s/gim;//判断空格
var regNumber = /[^\.^\d]+/gim;//判断数字和小数点
for(var i=0;i<$(':input',form).length;i++){
var val = $(':input',form)[i].value;
if($(':input',form)[i].type=='text'){
if(val.length==0){
tag = true;
var str = '请填写所有信息！';
break;
}else if(regSpace.test(val)){
tag = true;
var str = '不能填写空格！';
break;
}else if(regNumber.test(val)){
tag = true;
var str = '必须填写数字！';
break;
}
}
}
return {'tag':tag,'str':str}
}
扫一扫
6678
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
