JS清空上传控件input(type="file")的值的代码第1/2页_javascript技巧

google找到这样一个解决方法:
在上传控件中插入了值,就只能通过form的reset功能来清空了,但是form里面其他的值也被reset了。
既然可以使用form的reset清空,那就有办法了:新建一个临时form,然后将需要清空的上传控件移入其中,reset之后,再移回原来所在位置,最后删除创建的临时form。js代码: 

复制代码 代码如下:

var Upload = {
clear: function(id){
var up = (typeof id=="string")?document.getElementById(id):id;
if (typeof up != "object") return null;
var tt = document.createElement("span");
tt.id = "__tt__";
up.parentNode.insertBefore(tt,up);
var tf = document.createElement("form");
tf.appendChild(up);
document.getElementsByTagName("body")[0].appendChild(tf);
tf.reset();
tt.parentNode.insertBefore(up,tt);
tt.parentNode.removeChild(tt);
tt = null;
tf.parentNode.removeChild(tf);
},
clearForm: function(){
var inputs,frm;
if (arguments.length == 0)
{
inputs = document.getElementsByTagName("input");
}else{
frm = (typeof arguments[0] == "string")?document.getElementById(arguments[0]):arguments[0];
if (typeof frm != "object") return null;
inputs = frm.getElementsByTagName("input");
}
var fs=[];
for ( var i=0; i<inputs.length; i++ )
{
if (inputs[i].type == "file") fs[fs.length] = inputs[i];
}
var tf = document.createElement("form");
for ( var i=0; i<fs.length; i++ )
{
var tt = document.createElement("span");
tt.id = "__tt__" + i;
fs[i].parentNode.insertBefore(tt, fs[i]);
tf.appendChild(fs[i]);
}
document.getElementsByTagName("body")[0].appendChild(tf);
tf.reset();
for ( var i=0; i<fs.length; i++)
{
var tt = document.getElementById("__tt__" + i);
tt.parentNode.insertBefore(fs[i],tt);
tt.parentNode.removeChild(tt);
}
tf.parentNode.removeChild(tf);
}
}
view plaincopy to clipboardprint?
var Upload = {
clear: function(id){
var up = (typeof id=="string")?document.getElementById(id):id;
if (typeof up != "object") return null;
var tt = document.createElement("span");
tt.id = "__tt__";
up.parentNode.insertBefore(tt,up);
var tf = document.createElement("form");
tf.appendChild(up);
document.getElementsByTagName("body")[0].appendChild(tf);
tf.reset();
tt.parentNode.insertBefore(up,tt);
tt.parentNode.removeChild(tt);
tt = null;
tf.parentNode.removeChild(tf);
},
clearForm: function(){
var inputs,frm;
if (arguments.length == 0)
{
inputs = document.getElementsByTagName("input");
}else{
frm = (typeof arguments[0] == "string")?document.getElementById(arguments[0]):arguments[0];
if (typeof frm != "object") return null;
inputs = frm.getElementsByTagName("input");
}
var fs=[];
for ( var i=0; i<inputs.length; i++ )
{
if (inputs[i].type == "file") fs[fs.length] = inputs[i];
}
var tf = document.createElement("form");
for ( var i=0; i<fs.length; i++ )
{
var tt = document.createElement("span");
tt.id = "__tt__" + i;
fs[i].parentNode.insertBefore(tt, fs[i]);
tf.appendChild(fs[i]);
}
document.getElementsByTagName("body")[0].appendChild(tf);
tf.reset();
for ( var i=0; i<fs.length; i++)
{
var tt = document.getElementById("__tt__" + i);
tt.parentNode.insertBefore(fs[i],tt);
tt.parentNode.removeChild(tt);
}
tf.parentNode.removeChild(tf);
}
}

当前1/2页 12下一页阅读全文

时间: 2024-07-28 16:19:55

JS清空上传控件input(type=&quot;file&quot;)的值的代码第1/2页_javascript技巧的相关文章

如何用JS清空上传控件input(type=file)

var obj=网页中的<input type="file" /> obj.outerhtml = obj.outerhtml.replace(/(value=").+"/i, "$1""); 更经典的方法 需要清空<input type="file">的值,但上传控件<input type="file">的值不能通过网页特效来修改. google找到这样一个解

如何用JS清空上传控件input(type=&quot;file&quot;)的值

var obj=网页中的<input type="file" /> obj.outerhtml = obj.outerhtml.replace(/(value=").+"/i, "$1""); 更经典的方法 需要清空<input type="file">的值,但上传控件<input type="file">的值不能通过网页特效来修改. google找到这样一个解

清空上传控件input file的值_表单特效

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

CSS美化上传控件input type=file特效

第一种普通上传样式 第二种按钮样式

上传控件(input type=&quot;file&quot;)的用法

//判断上传的文件是否为空HttpPostedFile postFile = Request.Files["upfile"];if (postFile == null || postFile.ContentLength < 0){     //提示为空或者其他操作  }  //如果是文本文件,读取其内容Stream s = StreamCopyTo(postFile.InputStream);StreamReader sr = new StreamReader(s, System

Javascript美化input=file文件上传控件

[实例名称] JS实现文件上传一次性完成 [实例描述] 默认的HTML控件file可以实现文件的上传,但必须经过选择文件和单击上传按钮两个步骤.本例学习如何实现一步上传文件的操作. 例子  代码如下 复制代码 <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.111cn.net)</title> </head> <body>

自定义文件上传控件样式-input透明法

自定义文件上传控件样式-input透明法. 作为一个刚入坑不久的程序小白,今天和一个自定义<input type="file">控件的工作斗智斗勇了一上午.通过各种膜拜大神们的资料,总算最后有了一个还算看的过去的解决方案,来记录一下. 页面中,<input type="file">控件的默认显示 在Chrome中是这样: 在IE里是这样: 要如何使它变成下面这样,点击此区域也能上传文件呢? 原理:将input放进一个具有背景的div标签中,并

学习使用AngularJS文件上传控件_AngularJS

前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法.好东

ASP.NET文件上传控件Uploadify的使用方法_实用技巧

对于文件上传来说,有很多种实现方式,如传统的表单方式,现在流行的flash方式,甚至还有纯JS方式,之所以有这些方式来实现文件上传,我想主要原因是因为,传统的上传对于大文件支持不够,因为它是单线程同步机制,当大文件通过HTTP方式发送到服务端时,对于服务端站点的主线程影响比较大,会产生阻塞,所以,现在很多上传控制都是异步,多线程的方式去实现的. 今天来介绍一个文件上传控制,它就是Uploadify,它应该是flash的异步上传工具,对于大文件支持还不错,所以,我选择了它. 相关API介绍 upl