做前端开发的童鞋肯定会遇到这样的需求,获取表单里面全部input的值。
但是也不难发现这样的bug,给type=“file”的input标签赋值value,然后再通过js去获取value的时候,发现根本拿不到想要的那个值,拿到的是空字符串。
通过zepto或者jquery的源码也可以看出来,form表单的参数序列化方法serialize
$.fn.serializeArray = function() {
var name, type, result = [],
add = function(value) {
if (value.forEach) return value.forEach(add)
result.push({ name: name, value: value })
}
if (this[0]) $.each(this[0].elements, function(_, field){
type = field.type, name = field.name
if (name && field.nodeName.toLowerCase() != 'fieldset' &&
!field.disabled && type != 'submit' && type != 'reset' && type != 'button' && type != 'file' &&
((type != 'radio' && type != 'checkbox') || field.checked))
add($(field).val())
})
return result
}
$.fn.serialize = function(){
var result = []
this.serializeArray().forEach(function(elm){
result.push(encodeURIComponent(elm.name) + '=' + encodeURIComponent(elm.value))
})
return result.join('&')
}
也是忽略了以下几种情况的:
1、带有disabled属性的;
2、type类型不是button、submit、reset、radio、checkbox、file;
要解决这个问题:
1、可以直接拿value属性
<input type="file" name="file" value="123">
$("input[name='file']").attr("value"); //输出"123"
2、或者通过type=”hidden”去获取:
<input type="hidden" name="file" value="123">
$("input[name='file']").val(); //输出"123"
ok,还有更好的方式欢迎留言一起学习讨论。