`
luolonghao
  • 浏览: 119786 次
  • 性别: Icon_minigender_1
  • 来自: Shanghai
社区版块
存档分类
最新评论

input file控件onchange事件解决方案

 
阅读更多
问题:

在IE上选择相同文件时无法触发onchange事件,inputFile.value = ''也没用。


解决方案:

新建一个form,将input file放在form里,form.reset(),最后把form移除。

// 例子是基于jQuery,原生或其它类库思路一样
var tempForm = document.createElement('form');
$(inputFile).before(tempForm);
$(tempForm).append(inputFile);
tempForm.reset();
$(tempForm).after(inputFile);
$(tempForm).remove();


还有一个方法是移除input file后重新创建,但这个会丢失已绑定的相关事件,不太好用。
分享到:
评论

相关推荐

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

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

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

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

    html修改FileUpload控件的浏览按钮的文字改为自定义

    <input type="file" id="f" onchange="txt.value=this.value" name="f" style="position:absolute;filter:alpha(opacity=0);" size="1" hidefocus> ``` 在这段示例代码中,可以看到三个主要部分: 1. **隐藏文件...

    file控件选择上传文件确定后触发的js事件是哪个

    除了onchange事件,还有一些其他的JavaScript事件在file控件中可能会被触发,比如oninput事件。oninput事件在元素的值改变并且该改变是由用户操作导致时触发,包括在file控件中选择文件时。但是,oninput事件并不...

    input file的默认value清空与赋值方法

    文章中还提到了通过触发`onchange`事件的方式,即在文件选择器选择新文件后自动清除之前的默认值,这要求对用户的行为有一定的预判,确保在文件选择后能够触发相应的JavaScript函数。 整体来看,这些方法并非标准...

    HTML input file控件限制上传文件类型_动力节点Java学院整理

    在客户端,你可以使用JavaScript监听`onchange`事件,检查选中的文件是否符合指定的类型。以下是一个简单的JavaScript示例: ```javascript document.getElementById('File1').addEventListener('change', function...

    读取input:file的路径并显示本地图片的方法

    在网页开发中,`<input type="file">` 是一个常见的文件上传控件,它允许用户选择本地的文件,如图片。然而,由于安全原因,现代浏览器并不直接提供所选文件的完整路径,而是返回一个相对安全的文件名或者一个沙箱内...

    定义input type=file 样式的方法

    <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" /> <input type="submit" name="submit" class="btn" value=...

    基于jquery跨浏览器显示的file上传控件

    4. 使用JavaScript监听file控件的onchange事件,当用户选择文件后,将文件信息显示在文本框中。 在代码实现中,定义了一个jQuery插件fileEveryWhere,它提供了一系列默认的参数设置,比如包裹层的宽度和高度、按钮...

    asp.net 上传控件

    2. **文件选择事件**:当用户选择文件后,可能会触发控件的某些事件,如onChange事件,可以预览文件或执行初步验证。 3. **提交请求**:用户点击上传按钮,发送包含文件数据的HTTP POST请求到服务器。 4. **后端处理...

    Asp.net FileUpload控件 预览

    然后,编写JavaScript代码来处理FileUpload控件的onChange事件,读取文件并显示预览: ```javascript function previewImage() { var input = document.getElementById('FileUpload1'); if (input.files && ...

    js生成和删除控件.doc

    例如,可以为下拉列表添加`onchange`事件,当用户选择特定值时,通过修改其他隐藏控件的`style.display`属性来控制其可见性。 对于动态添加文件输入控件的场景,`addFile()` 函数展示了如何在页面上动态创建一个...

    类似QQ邮箱的js附件上传源代码

    这段代码是实现一个类似QQ邮箱的JavaScript附件上传功能的示例。...不过,实际应用中,通常会使用更复杂、更安全的解决方案,如使用Ajax进行异步上传,以及现代浏览器支持的File API来获取文件信息。

    某马机构----表单和表单控件.rar

    学习HTML表单和控件,不仅需要理解它们的语法和用法,还需要掌握如何处理表单事件,如`onsubmit`、`onchange`等,以及如何使用JavaScript进行表单验证,确保用户输入的有效性。同时,了解CSS对表单元素的样式控制也...

    EasyUI filebox空间上传文件操作说明

    本文主要针对在使用EasyUI框架中的`filebox`控件时所遇到的问题及解决方案进行了详细的阐述。特别是在结合AjaxFileUpload包的情况下,如何实现文件的异步上传,并对EasyUI与AjaxFileUpload的源码进行必要的修改以...

    js上传图片预览图片.pdf

    首先,在HTML文件中,我们需要添加一个文件上传input控件 `<input type="file" id="uploadImg" onchange="onUploadImgChange(this)">`,该控件用于选择要上传的图片文件。在JavaScript代码中,我们可以通过 `sender....

    File文件控件,选中文件(图片,flash,视频)即立即预览显示

    本文将详细介绍如何实现一个File文件控件,使得用户在选择图片、Flash或视频文件后能够立即预览,而无需页面刷新。这个功能在许多网站的上传功能中非常实用,例如在线编辑器、媒体分享平台等。我们将探讨JavaScript...

    input值总结

    以上只是`<input>`标签部分知识点的总结,实际使用中还有更多属性和用法,如`form`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`等,以及各种事件处理如`onchange`, `onclick`等,...

Global site tag (gtag.js) - Google Analytics