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

 更新时间:2013年12月24日 09:37:42   作者:  
本篇文章主要介绍了js 获取、清空input type="file"的值(示例代码) 需要的朋友可以过来参考下,希望对大家有所帮助

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

js 获取<intput type=file />的值

复制代码 代码如下:

<html>
<script language='javascript'> 
function   show(){ 
var   p=document.getElementById("file1").value;
document.getElementById("s").innerHTML="<input id=pic type=image height=96 width=128 /> "; 
document.getElementById("pic").src=p;
alert(p);  

</script>

<head>
<title>MyHtml.html</title>
</head>

<body>
<input type="file" name="file1" id="file1" onpropertychange="show();" />
<span id="s"></span>

</body>
</html>


清空上传控件(<input type="file"/>)的值的两种方法

方法1:

复制代码 代码如下:

<span   id=span1> 
<input   name=ab   type=file> 
</span> 
<input   name=button1   type=button   value="按"   onclick=show()> 

<script   language=javascript> 
function   show() 

document.getElementById("span1").innerHTML="<input   name=ab   type=file>"; 

</script> 


方法2:
复制代码 代码如下:

function clearFileInput(file){
var form=document.createElement('form');
document.body.appendChild(form);

//记住file在旧表单中的的位置
var pos=file.nextSibling;
form.appendChild(file);
form.reset();
pos.parentNode.insertBefore(file,pos);
document.body.removeChild(form);
}

相关文章

  • 微信小程序中的canvas 文字断行和省略号显示功能的处理方法

    微信小程序中的canvas 文字断行和省略号显示功能的处理方法

    大家都知道在canvas中没有提供方法来处理文字的多行问题,只有通过截取指定字符串来达到目的。接下来通过本文给大家介绍微信小程序中的canvas 文字断行和省略号显示功能 ,需要的朋友可以参考下
    2018-11-11
  • Elasticsearch实现复合查询高亮结果功能

    Elasticsearch实现复合查询高亮结果功能

    这篇文章主要介绍了Elasticsearch实现复合查询,高亮结果功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 用JavaScrpt实现文件夹简单轻松加密的实现方法图文

    用JavaScrpt实现文件夹简单轻松加密的实现方法图文

    电脑里经常会存储着重要文件,这些文件需要进行加密,有许多方法来实现。但如果想对一个文件夹里的所有文件都进行加密,数量少还可以,要是数量多岂不是得把人累死?
    2008-09-09
  • 一文搞懂JavaScript中bind,apply,call的实现

    一文搞懂JavaScript中bind,apply,call的实现

    bind、call和apply都是Function原型链上面的方法,因此不管是使用function声明的函数,还是箭头函数都可以直接调用。本文就带你看看如何实现bind、call和apply
    2022-06-06
  • js运动动画的八个知识点

    js运动动画的八个知识点

    本文给大家分享的是个人在学习js运动动画的过程中总结的我们需要注意的8个知识点,分别是速度动画、透明度渐变、缓冲运动、多物体运动、获取样式、任意属性值、链式运动和同时运动,非常的详细,推荐给小伙伴们。
    2015-03-03
  • JavaScript基本类型值-Undefined、Null、Boolean

    JavaScript基本类型值-Undefined、Null、Boolean

    本文主要介绍了JavaScript基本类型值-Undefined、Null、Boolean的相关知识,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript碰撞检测原理及其实现代码

    JavaScript碰撞检测原理及其实现代码

    这篇文章主要为大家详细介绍了JavaScript碰撞检测原理及其实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 详解小程序云开发数据库

    详解小程序云开发数据库

    这篇文章主要介绍了小程序云开发数据库,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 小程序中canvas的drawImage方法参数使用详解

    小程序中canvas的drawImage方法参数使用详解

    这篇文章主要介绍了小程序中canvas的drawImage方法参数使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • Javascript实现的StopWatch功能示例

    Javascript实现的StopWatch功能示例

    这篇文章主要介绍了Javascript实现的StopWatch功能,结合具体实例形式分析了javascript自定义StopWatch实现测试运行时间功能的相关操作技巧,需要的朋友可以参考下
    2017-06-06

最新评论