file上传控件onchange事件失效的解决方法
标签: file 上传 控件 2008-11-22 23:05
最近在做项目时，遇到一些用户操作方面的问题，用户想点击input file控件的浏览就直接将文件读取到列表中，我使用StreamReader读取文件时，遇到IO权限的问题，要想读取文件到StreamReader中必须对该文件享有User可读权限，许多用户的客户端不可能手动设置给这个用户的权限，考虑到安全问题，我只好先上传到服务器端，然后再读取上传后的文件，这样权限问题就解决了。但是直接点击input file控件就上传，就要使用异步上传了，我在寻找file控件的部分事件时，发现onchange竟然存在这样一个问题，第一次浏览时是可以使用的，再浏览时onchange也就不激发了，为什么呢，曾经想过onpropertychange这个事件，尝试后依然不激发。
后来我寻找了一个解决方法，就是每点击浏览激活onchange事件一次，就重新初始化一下这个控件，毕竟第一次onchange是可以激发的。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script language="javascript" type="text/javascript" src="js/jquery.pack.js"></script>
<script language="javascript" type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript">
$(function(){
$("#File1").change(function(){
fileOnchage();
});
});
function fileOnchage()
{
var content = '\
<input id="File1" name="File1" type="file" onchange="fileOnchage();" />\
';
$("#dv").append(content);
$.ajaxFileUpload({
url:'response/Handler.ashx', //需要链接到服务器地址
secureuri:false,
fileElementId:'File1', //文件选择框的id属性
dataType: 'json', //服务器返回的格式，可以是json
success: function (data, status){
//bind(data);
},
error: function (data, status, e)
{
alert(e);
}
});
$("#File1").remove();
}
</script>
</head>
<body>
<form id="form1" method="post" action="" enctype="multipart/form-data">
<div id="dv">
<input id="File1" name="File1" type="file" />
</div>
</form>
</body>
</html>
我利用了jquery的remove方法，remove方法只会移除单个元素，所以新添加的会代替原来的继续使用。不知道大家有没有更好的办法。。。
分享到：
相关推荐
那么，如何在js代码模式通过代码触发textbox控件的onchange事件呢，经过查阅资料，发现js提供了一个方法，可以触发控件的应该是所有事件。object.fireEvent()方法，使用方法如 object.fireEvent(‘onchange’)，即可...
在这个主题中，我们将深入探讨如何使用Timagelist组件以及其onChange事件。 首先，让我们了解Timagelist组件的基本功能。Timagelist不仅能够存储图像，还支持多种图像格式，如BMP、JPEG、PNG等。你可以通过它的`Add...
最近在使用layui框架做城市的三级级联的时候，发现jquery中的onchange事件方法在layui框架中失效了。 然后浏览layui社区，了解到layui监控一个控件变化有自己的方法。 html <select lay-filter=test></...
web前端小问题，select 选择事件，当选择select同一值触发onchange事件
安装该模块后，对于有写onchange方法的字段，可以设置定时执行时间间隔。
在这个实例中，我们将深入探讨 EasyUI 中的两个重要组件：`easyui-textbox` 和 `easyui-combobox`，以及它们的 `onchange` 事件响应。 `easyui-textbox` 是一个基础输入框组件，它扩展了原生 HTML 的 `input` 元素...
6. **与其他功能的结合**："onchange" 事件插件可以很好地与其他 CKEditor 功能结合，如与 CKFinder 集成实现图片上传，或与 ACF（Advanced Content Filter）配合过滤用户输入的内容。 7. **版本兼容性**：确保你的...
改变一下思路变成键盘按键事件，如下： ”txtName” runat=”server” xss=removed></asp> 这里有一点毛病是，你复制粘贴的内容，无法触发这个事件。下面是相关的一些代码： 代码如下: function fNameChange(){ if($...
标题所指的知识点是“Radio单选JS动态添加的选项onchange事件无效的解决方法”。这个问题常常出现在使用JavaScript动态向页面中添加单选按钮（radio）时，为这些动态添加的单选按钮绑定的onchange事件无法正常触发。...
其次，在页面加载完成后，我们使用JavaScript代码给省份的select元素赋值，然后通过调用该元素的fireEvent方法来手动触发onchange事件。这样做的好处是可以在不改变用户界面的情况下，实现后台逻辑与前端界面的同步...
在Easy-UI中，`onchange`事件是用于监听用户在组件（如Combobox）中做出改变时触发的事件，这对于实现动态交互和数据处理至关重要。 首先，我们来看如何为Easy-UI的Combobox添加`onchange`事件。在HTML结构中，我们...
### JSP中Select的onchange事件用法实例详解 #### 一、引言 在Web开发中，`onchange`事件是一种常用的JavaScript事件，用于在用户更改表单元素（如`<select>`下拉列表）时触发特定的操作。在JSP（JavaServer Pages...
在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件. 这样一来问题就解决了. 那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了. 但是oninput有个诡异,...
在Web开发中，file上传控件是表单中常用的一种组件，它允许用户上传文件到服务器。然而，不同的浏览器对file控件的原生支持存在差异，这给跨浏览器的兼容性带来了挑战。特别是在样式定义和交互行为上，file控件的...
在探讨文件上传组件的美化方案时，我们会涉及到多个方面的知识点，主要包括跨浏览器兼容性的处理、CSS样式的应用以及JavaScript的交互操作。首先，我们要理解在不同浏览器中文件上传input（<input type="file">）的...
下面是一个结合onchange事件处理file控件上传文件的更完整的示例： ```javascript document.getElementById('fileInput').addEventListener('change', function(event) { var file = event.target.files[0]; // ...