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

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下一页阅读全文

(0)

相关推荐

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

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

  • 自制的文件上传JS控件可支持IE、chrome、firefox etc

    复制代码 代码如下: (function() { if (window.FileUpload) { return; } window.FileUpload = function (id, url) { this.id = id; this.autoUpload = true; this.url = url; this.maxSize = null; this.extensions = null; this.dropId = null; }; window.FileUpload.prototype

  • JS限制上传图片大小不使用控件在本地实现

    文件上传之前的检测,通常是通过文件名来判断文件类型是否合法,但是要想检测文件的大小很难办到,除非在本地或者使用控件.使用JS可以轻松解决词问题,js在上传图片前判断大小 这个可以用javascript实现,效果...//允许上传图片文件的大小 具体代码如下   复制代码 代码如下: <script language=javascript> var ImgObj=new Image(); //建立一个图像对象 var AllImgExt=".jpg|.jpeg|.gif|.bmp|.p

  • Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例

    效果DEMO:http://www.never-online.net/tutorial/js/upload/Javascript & DHTML 实例编程(教程)(三),初级实例篇-上传文件控件实例上章基本上把要交代的基本知识都说了一些,今天终于开始写代码了:D首先来做一个实例,批量上传的UI控件.以后一般做的示例也是以UI控件为主的.都是封装成Object或者用Function封装成"Class"类. 也许对于单单看前几章的朋友来说这个例子过于深奥了,但是不用担心,一步步来解

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

    一直以来纠结于这个问题.今天闲来上网搜索了一下这个问题.终于知道答案.是onchange事件.经过本人测试,可用.还有说onpropertychange也可以.经chrome浏览器测试,无效果.不知道是什么原因.

  • JavaScript动态数量的文件上传控件

    js动态数量的文件上传控件实现代码如下所述: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>动态数量的文件上传</title> <script type="text/javascript" src="

  • Javascript & DHTML上传文件控件第1/4页

    上章基本上把要交代的基本知识都说了一些,今天终于开始写代码了:D 首先来做一个实例,批量上传的UI控件.以后一般做的示例也是以UI控件为主的.都是封装成Object或者用Function封装成"Class"类. 也许对于单单看前几章的朋友来说这个例子过于深奥了,但是不用担心,一步步来解释应该很快理解的,关键是理解怎么做,而不是怎么写. 首先看一个成品截图预览: 一.接下来我们先说思路,首先定义一个upload"类", 一).这个类的公共访问信息应该有: 1.构造函数

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

    google找到这样一个解决方法: 在上传控件中插入了值,就只能通过form的reset功能来清空了,但是form里面其他的值也被reset了. 既然可以使用form的reset清空,那就有办法了:新建一个临时form,然后将需要清空的上传控件移入其中,reset之后,再移回原来所在位置,最后删除创建的临时form.js代码:  复制代码 代码如下: var Upload = { clear: function(id){ var up = (typeof id=="string")?d

  • 清空上传控件input file的值

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

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

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

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

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

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

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

  • AngularJS 文件上传控件 ng-file-upload详解

    网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://github.com/danialfarid/ng-file-upload 这两个非常类似,连js文件的结构都是一样的.核心的js是.min.js,还都有一个-shim.min.js,用来支持上传进度条和上传暂停等高级功能. 按道理讲shim.js应该是可加可不

  • ASP.NET文件上传控件Uploadify的使用方法

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

  • ASP.NET多文件上传控件Uploadify的使用方法

    对于Uploadify文件上传之前已经讲过一次(文件上传~Uploadify上传控件),只不过没有涉及到多文件的上传,这回主要说一下多个文件的上传,首先,我们要清楚一个概念,多文件上传前端Uploadify是通过轮训的方式去调用我们的后台upload程序的,所以,对于多文件上传来说,也没什么稀奇的. 下面是文件上传后的缩略图如下 列表的组装使用JS模板,这样对于复杂的HTML结构来说,可以减少拼写错误的出现,关闭是将LI元素从UI元素移除,最后提交时,从UI里检查LI元素,然后对它进行组装,并进

随机推荐