解决type=file中获取不到value值

做前端开发的童鞋肯定会遇到这样的需求,获取表单里面全部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,还有更好的方式欢迎留言一起学习讨论。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值