解析使用JS 清空File控件的路径值

1.关于如何用脚本修改fileupload控件值的问题,

开发环境vs2005,在上传文件时,需要一个取消的按钮来清空type=file的value,而且这个页面上有多个file控件

这个比较麻烦因为file的值本身是不允许用脚本修改的(安全角度考虑)

方法1).使用脚本把这个file的input移动到一个form中,然后调用reset,如果有多个这样的input当然还要再移出来.这个方法我不会采用,因为对.net开发者

来讲习惯了一个页面就一个form所有控件都在其中.

方法2).这个方法有点投机,就是在脚本中调用
var fileup = document.getElementById(fileid);
fileup.outerHTML = fileup.outerHTML; 这个ie对脚本处理以及展现机制有关

方法3).这个主要是在解决ff上的问题时考虑到的,其实就是重新生成了一个id相同的file,这里要注意 name一定也要赋值,否则是很难提交给服务器接受的

在平时项目开发中会有上传文件的功能,一般在前端会通过JS来判断上传文件是否属于指定的文件类型,如果不属于就将控件值清空! (当然你也可以不清空)

有一种方法可以很简单的装文件上传组件的值清空,代码如下:
var file=document.getElementById("form1:fileupload");
file.outerHTML=file.outerHTML

以上方法之能在IE中使用
为了兼容FireFox我们使用下面的方式来清空fileupload控件的值:
<span id='uploadSpan'>
<input type="file">
</span>
<script language="JavaScript">
var html=document.getElementById('uploadSpan').innerHTML;
function resetFile(){
document.getElementById('uploadSpan').innerHTML=html;
}
</script>
这样就行了，各浏览器都支持的

赞 (0)

相关推荐

  • js 获取、清空input type="file"的值(示例代码)

    上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过 javascript来赋值,这就使得不能通过value=""语句来清空它.很容易理解为什么只读,如果可以随意赋值的话,那么用户只要打开你的网页, 你就可以随心所欲的上传他电脑上的文件了. js 获取<intput type=file />的值 复制代码 代码如下: <html>

  • js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type="file" />隐藏,点其他的标签(图片等)来时实现选择文件上传功能. 看代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • 清空上传控件input file的值

    复制代码 代码如下: var obj=网页中的<input type="file" /> obj.outerHTML = obj.outerHTML.replace(/(value=\").+\"/i, "$1\"");

  • 解析使用JS 清空File控件的路径值

    1.关于如何用脚本修改fileupload控件值的问题, 开发环境vs2005,在上传文件时,需要一个取消的按钮来清空type=file的value,而且这个页面上有多个file控件 这个比较麻烦因为file的值本身是不允许用脚本修改的(安全角度考虑) 方法1).使用脚本把这个file的input移动到一个form中,然后调用reset,如果有多个这样的input当然还要再移出来.这个方法我不会采用,因为对.net开发者 来讲习惯了一个页面就一个form所有控件都在其中. 方法2).这个方法有点

  • 使用JS 清空File控件的路径值

    如果用.net控件可以调用reset方法,可是如果用html控件就只能用js解决了. 方法是在file外层套一个span,重设span里的html值 复制代码 代码如下: var html=document.getElementById('uploadSpan').innerHTML;document.getElementById('uploadSpan').innerHTML=html;

  • 原生js实现上传图片控件

    原生js实现上传图片控件

    本文实例为大家分享了js实现上传图片控件的具体代码,供大家参考,具体内容如下 一.修改原生 input 样式 html 结构 <div class="card"> <input id="upload" type="file" accept=".jpg" /> <div class="view"> <!-- 上传成功后 --> <div id="

  • 学习vue.js表单控件绑定操作

    本文实例为大家分享了vue.js表单控件绑定的具体代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件绑定</title> </head> <body> <!-- v-model在表单控件元素上实现数据的双向绑定 -->

  • ASP.NET中日历控件和JS版日历控件的使用方法（第5节）

    ASP.NET中日历控件和JS版日历控件的使用方法（第5节）

    今天小编带大家以做任务的形式了解ASP.NET中日历控件的使用方法,主要任务内容: 1.添加一个日历,设置日期以蓝色的完整名称显示,周末以黄色背景红色文字显示,而当前日期使用绿色背景显示,用户可以选择一天.一周或整个月,被选的天/周/月使用灰色背景色来显示.当选中一个日期后,把时间显示在下面的一个文本框中,效果如图所示: 2.设计一个注册页面,使用js日历控件帮助用户输入出生日期.效果如图所示: 学习项目一  Calendar日历控件 1.在站点下创建一个Calendar页面,并在页面上拖放一个

  • 用.Net的File控件上传文件的解决方案

    在遍历了csdn中所有关于上传大文件的帖子以后,写了这篇垃圾.(:-)) 上传大文件,有好几种方法: 1.思归的HttpWorkerRequest方法,太难,看不懂:-( 2.利用第三方的控件 AspNetUpload 要钱!!算了,咱还是喜欢免费的. 3.修改web.config文件,但是不能捕获错误. 4.通过ftp的方式上传.服务器需要提供ftp服务. 没辙,只好选第三种方式,谁让咱太蠢了呢!(太蠢了,没有关系,要多吃鱼,听说吃鱼能聪明点.) 那就仔细专研第三种方式吧! 修改Webcong

  • asp.net html控件的File控件实现多文件上传实例分享

    asp.net多文件上传使用html控件的File控件,在form中就需要加入[ enctype="multipart/form-data"]. up3.aspx文件代码 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="up3.aspx.cs" Inherits="up3" %> <!DOCTYPE ht

  • js重写alert控件(适合学习js的新手朋友)

    纯粹是为了打发时间,手写了一个JS的 alert控件. 代码如下: <html> <head> <script type="text/javascript"> var alertObj = new Object(); var generalStyle = { zIndex: 0, width: "200px", height: "100px", border: "thick solid #CCCCCC

  • JS实现OCX控件的事件响应示例

    JS支持OCX控件的事件(event),当OCX控件定义的事件发生时,JS可以捕获该事件并对事件进行相应的处理. 个人理解,其实就是事件的响应由谁来完成,OCX控件自身肯定是可以实现的,JS提供的这种机制使JS也可以完成OCX控件事件的响应. 简单举例如下: 首先在OCX控件中添加自定义事件(预定义事件同理,如鼠标点击等,没亲自试,感觉原理应该是一样的), 事件应该是属于窗口的,所以在Ctrl类上单击右键,Add->Add Event,如下图: 在打开的对话框中输入事件名称,例如OnChange

  • Vue.js 表单控件操作小结

    概念说明 v-model指令:在表单控件元素上创建双向数据绑定.v-model 会根据控件类型自动选取正确的方法来更新元素. 输入框 实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</tit

随机推荐