`
SwordShadow
  • 浏览: 270790 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JavaScript 文件上传不触发onchange事件

阅读更多

文件上传时用到一个功能,使用html元素的input标签实现,

 

<input id="imageFile" name="imageFile1" accept="image/jpg,image/jpeg,image/png,image/bmp,image/gif" type="file"
	 title="点击选择文件"  onchange="imageSubmit(this,0);"/>

 

 

选中图片后立即触发onchange事件上传图片,但是重复选择相同的图片不会触发onchang事件,解决办法:

function imageSubmit(obj) {
	var allowExt=",.jpg,.jpeg,.png,.bmp,.gif,"; //支持的扩展名
        var fileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
        if(allowExt.indexOf(","+fileExt+",")==-1){
	    alert("上传图片类型错误!目前仅支持jpg,gif,jpeg,bmp,png格式的图片,请重新上传");
            var nf = obj.cloneNode(true);
	    nf.value='';   
            obj.parentNode.replaceChild(nf, obj);  
	    return false;
        }
	
        //其他业务逻辑 省略
        
	//解决上传相同图片不触发onchange事件
	var nf = obj.cloneNode(true);
	nf.value='';   
        obj.parentNode.replaceChild(nf, obj);  
		
	
}

 cloneNode()方法用来创建调用这个节点的一个完全相同的副本,参数true表示执行深复制,也就是复制节点及整个子节点树,在参数为false的情况下,执行浅复制,即只复制节点本身。复制后返回的节点副本属于文档所有,但并没有为它指定父节点。因此,这个节点副本就成为了一个“孤儿”,除非通过appendChild()、insertBefore()或replaceChild()将它添加到文档中。

 

分享到:
评论

相关推荐

    js 触发select onchange事件代码

    但在JavaScript中,直接给select或text赋值并不会触发onchange事件,这是因为在JavaScript代码执行时,用户并没有手动改变元素的内容,因此不会触发onchange事件。 在实际开发中,我们经常需要在页面加载完成后自动...

    js触发onchange事件的方法说明

    在Web开发中,JavaScript 是一种脚本语言,它能够让我们实现动态的网页效果。...同时,为了更好的用户体验和数据的一致性,开发者应根据实际的应用场景和需求,合理地选择使用JavaScript触发onchange事件的方法。

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

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

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

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

    javascript 触发事件列表

    ### JavaScript 触发事件列表详解 #### 一、单击事件(onclick) 当用户单击鼠标按键时触发的事件。通常,在HTML元素上定义`onclick`属性,该属性指定一个事件处理程序或一段代码,当点击事件发生时,这段代码将会被...

    JavaScript触发事件列表

    "JavaScript触发事件列表" JavaScript是一种广泛应用于Web开发的编程语言,它提供了许多事件处理机制,以便开发者能够捕捉和响应用户交互操作。下面是JavaScript触发事件列表,涵盖了常见的事件类型和应用场景: ...

    ckeditor onchange 事件插件

    6. **与其他功能的结合**:"onchange" 事件插件可以很好地与其他 CKEditor 功能结合,如与 CKFinder 集成实现图片上传,或与 ACF(Advanced Content Filter)配合过滤用户输入的内容。 7. **版本兼容性**:确保你的...

    js触发select onchange事件的小技巧

    当用户在`select`元素中选中一个不同的选项时,浏览器会自动触发`onchange`事件,并执行绑定到该事件上的JavaScript函数。比如下面的例子: ```html 省份: &lt;select id="province" onchange="changeProvince()"&gt; ...

    jsp中select的onchange事件用法实例.docx

    在Web开发中,`onchange`事件是一种常用的JavaScript事件,用于在用户更改表单元素(如`&lt;select&gt;`下拉列表)时触发特定的操作。在JSP(JavaServer Pages)环境中,结合Java后端技术,我们可以实现更复杂的功能,例如...

    JavaScript判断文件上传类型的方法

    本文实例展示了JavaScript判断文件上传类型的方法,是一个非常常用的技巧。具体实现方法如下: 文件上传时用到一个功能...选中图片后立即触发onchange事件上传图片,但是重复选择相同的图片不会触发onchang事件,解决办

    easy-ui onchange/easy-ui添加onchange

    在Easy-UI中,`onchange`事件是用于监听用户在组件(如Combobox)中做出改变时触发的事件,这对于实现动态交互和数据处理至关重要。 首先,我们来看如何为Easy-UI的Combobox添加`onchange`事件。在HTML结构中,我们...

    js触发事件大全

    JavaScript触发事件是网页交互设计的核心组成部分,它们允许开发者在用户与网页进行互动时执行特定的代码块。以下是对“js触发事件大全”中所提及的关键事件的深入解析,旨在为前端开发者提供全面的理解。 ### 一、...

    鼠标触发的事件,JS脚本

    2. onChange:当前元素失去焦点并且元素的内容发生改变而触发的事件。 3. onFocus:当某个元素获得焦点时触发的事件。 4. onReset:当表单中 RESET 的属性被激发时触发的事件。 5. onSubmit:一个表单被递交时触发的...

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

    首先,file控件在用户选择文件后会触发onchange事件。onchange事件属于表单元素的常见事件之一,当控件的值发生变化时会被触发,具体来说,就是当用户通过file控件选定了一个文件后,该事件就会被触发。onchange事件...

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

    在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件. 这样一来问题就解决了. 那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了. 但是oninput有个诡异,...

    [js]javascript事件集合(包有触发事件).pdf

    以下是一些常见的JavaScript事件以及它们的触发方式和应用场景。 #### 1. onclick事件 `onclick`事件是最常见的事件之一,当用户点击一个元素时触发。例如: ```javascript 点击我" onclick="window.open('xxxx....

    javascript:onmouse事件大全

    * onChange:当前元素失去焦点并且元素的内容发生改变而触发的事件 * onFocus:当某个元素获得焦点时触发的事件 * onReset:当表单中 RESET 的属性被激发时触发的事件 * onSubmit:一个表单被递交时触发的事件 滚动...

    纯JavaScript实现获取onclick、onchange等事件的值

    总结来说,纯JavaScript获取`onclick`、`onchange`等事件的值,主要涉及`getAttributeNode()`和`nodeValue`属性的使用。理解这些方法可以帮助开发者更有效地处理页面上的事件,从而提高交互体验。对于更复杂的事件...

Global site tag (gtag.js) - Google Analytics