`
xiaoyu1985ban
  • 浏览: 133002 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

解决input file 的onchange事件只生效一次的问题

阅读更多

文件选择框的onchange事件只在第一次改变时生效,以后再选择文件不会触发onchange事件。

 

解决方法1:用jQuery的live代替直接使用change。

错误代码:

$("#fileToUpload").change(function(){
        //do someing
    })

正确代码:

$("#fileToUpload").live('change', function(){
        //do someing
    })

 

解决方法2:onchange后,生成一个新input type file,代替原有的input file

代码:

$('#inputFileID').replaceWith('<input name="fileToUpload" type="file" id="inputFileID"  />');

 

 

 

声明:

文章来自于ITeye,欢迎访问我的博客:xiaoyu1985ban.iteye.com

ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。若作者同意转载,必须以超链接形式标明文章原始出处和作者。

 

分享到:
评论
1 楼 冯瑞_FR 2016-12-28  
第一个方法,从1.7版本Jquery已经不用live了。

第二个方法需要重新绑定事件

相关推荐

    javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足

    onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性! 在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何...

    easyui-textbox和easyui-combobox的onchange事件响应实例

    `onchange` 事件是 JavaScript 中的一个重要事件,它会在元素的值发生改变并失去焦点后触发。在 EasyUI 中,`onchange` 事件同样适用于 `easyui-textbox` 和 `easyui-combobox`,可以用来监听用户在这些组件上的操作...

    select 选择同一值触发onchange事件

    web前端小问题,select 选择事件,当选择select同一值触发onchange事件

    解决layui中onchange失效以及form动态渲染失效的问题

    最近在使用layui框架做城市的三级级联的时候,发现jquery中的onchange事件方法在layui框架中失效了。 然后浏览layui社区,了解到layui监控一个控件变化有自己的方法。 html &lt;select lay-filter=test&gt;&lt;/...

    只修改input file组件的浏览按钮样式

    ### 只修改input file组件的浏览按钮样式 在前端开发中,`&lt;input type="file"&gt;`组件通常用于让用户选择本地文件并上传到服务器。不过,默认情况下,此组件的样式较为简单,不符合很多项目的视觉需求。为了提升用户...

    使用Delphi的OnChange事件,Timagelist组件..rar

    在Delphi中,onChange事件通常与一个事件处理函数关联,该函数会在事件触发时执行。 下面是一个简单的例子,展示如何使用onChange事件: ```delphi unit Unit1; interface uses Winapi.Windows, Winapi....

    easy-ui onchange/easy-ui添加onchange

    在本文中,我们将深入探讨如何在Easy-UI框架中使用`onchange`事件,以及如何获取组合框(Combobox)的当前选中值。Easy-UI是一个基于jQuery的轻量级前端开发框架,它提供了丰富的组件,如表格、窗口、菜单、对话框等...

    如何将input type=file显示的浏览变成英文的

    4. **绑定事件处理器:** 为了实现在用户选择文件后更新文本输入框中的值,我们需要绑定一个`onChange`事件处理器到隐藏的`&lt;input type="file"&gt;`元素。 ```html &lt;input type="file" name="picpath" id="picpath...

    文件上传input file简便美化方案(css)

    在这个JavaScript代码中,我们为file input添加了事件监听,当用户选择文件之后,会触发事件处理函数,该函数会将文件路径设置到文本框中。如果浏览器不支持addEventListener或attachEvent方法,我们使用传统的...

    odoo定时执行onchange事件模块

    安装该模块后,对于有写onchange方法的字段,可以设置定时执行时间间隔。

    js触发onchange事件的方法说明

    js中onchange事件是在客户端改变输入控件的值,比如一个textbox,会出发的一个事件。但是如果在js代码中改变一个textbox的value,而不是通过键盘输入改变一个textbox值的话,是不会出发onchange事件的。 那么,如何...

    ckeditor onchange 事件插件

    "onchange" 事件插件是 CKEditor 的一个扩展功能,它允许开发者监听编辑器中的内容变化,并在内容发生改变时触发特定的回调函数。这个功能对于实时保存、自动校验或者实时预览等场景非常有用。 CKEditor 的 ...

    解决angularJS中input标签的ng-change事件无效问题

    当`&lt;input type="file"&gt;`的`onchange`事件触发时,我们可以手动调用AngularJS的 `$apply()` 方法,强制进行一次脏检查,从而执行我们期望的函数。 下面是一个示例代码: ```html &lt;input type="file" onchange=...

    input file图片上传即时预览

    &lt;input type="file" id="imageInput" accept="image/*" onchange="previewImage(event)"&gt; 预览图片"&gt; ``` **2. JavaScript部分:** 在`change`事件中,获取用户选择的文件,然后使用FileReader对象的`...

    oninput,onpropertychange,onchange的用法和区别

    oninput 事件是 onpropertychange 事件的非 IE 浏览器版本,它可以检测当前对象的值变化,但是它与 onpropertychange 事件不同之处在于,它只在对象的值发生变化时触发事件,而不检测其他属性的变化。 在实际开发中...

    javascript的onchange事件与jQuery的change()方法比较

    改变一下思路变成键盘按键事件,如下: ”txtName” runat=”server” xss=removed&gt;&lt;/asp&gt; 这里有一点毛病是,你复制粘贴的内容,无法触发这个事件。下面是相关的一些代码: 代码如下: function fNameChange(){ if($...

    怎样让input type=file 只读,并能实现文件上传

    ### 如何使 input type=file 只读并实现文件上传 在网页开发中,有时我们需要让用户选择一个文件但不允许他们更改已选择的文件。这通常是为了防止用户在提交表单前临时更改文件,从而确保文件的一致性和安全性。...

    Radio 单选JS动态添加的选项onchange事件无效的解决方法

    标题所指的知识点是“Radio单选JS动态添加的选项onchange事件无效的解决方法”。这个问题常常出现在使用JavaScript动态向页面中添加单选按钮(radio)时,为这些动态添加的单选按钮绑定的onchange事件无法正常触发。...

    js 触发select onchange事件代码

    在前端开发中,select元素和text文本输入框元素经常需要处理用户的交互行为,其中onchange事件是一个非常重要的事件。onchange事件会在元素的内容改变并且失去焦点后触发。但在JavaScript中,直接给select或text赋值...

Global site tag (gtag.js) - Google Analytics