js 获取、清空input type=

 更新时间:2014年02月19日 10:10:01   投稿:jingxian  
本篇文章主要是对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);
}

相关文章

  • JavaScript 字符串操作的几种常见方法

    JavaScript 字符串操作的几种常见方法

    JavaScript 操作字符串的几种常见方法,需要的朋友可以参考下。
    2009-11-11
  • 向当前style sheet中插入一个新的style实现方法

    向当前style sheet中插入一个新的style实现方法

    今天为了临时解决页面样式问题,为了方便,直接在这个公共的js里面向style sheet插入新的style rule,感兴趣的朋友可以出纳卡下哈
    2013-04-04
  • JS使用Dijkstra算法求解最短路径

    JS使用Dijkstra算法求解最短路径

    这篇文章主要为大家详细介绍了JS使用Dijkstra算法求解最短路径,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • 微信小程序人脸识别功能代码实例

    微信小程序人脸识别功能代码实例

    这篇文章主要介绍了微信小程序人脸识别功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JavaScript 箭头函数的特点、与普通函数的区别

    JavaScript 箭头函数的特点、与普通函数的区别

    这篇文章主要介绍了JavaScript 箭头函数的特点、与普通函数的区别,很多情况下,箭头函数和函数表达式创建的函数并无区别,只有写法上的不同,本文第二块内容将介绍箭头函数和普通函数功能上的区别,感兴趣的朋友跟随小编一起看看吧
    2021-11-11
  • 详解JavaScript对象类型

    详解JavaScript对象类型

    这篇文章主要为大家详细介绍了JavaScript对象类型,分析了JavaScript六种数据类型,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • JavaScript ES6常用基础知识总结

    JavaScript ES6常用基础知识总结

    ES6中为我们提供了很多好用的新特性,其中包括let,箭头函数以及扩展运算符…等,以下就是总结的常用基础知识
    2019-02-02
  • Cropper.js进阶实现图片旋转裁剪处理功能示例

    Cropper.js进阶实现图片旋转裁剪处理功能示例

    这篇文章主要为大家介绍了Cropper.js进阶实现图片旋转裁剪功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 基于javascript实现单选及多选的向右和向左移动实例

    基于javascript实现单选及多选的向右和向左移动实例

    这篇文章主要介绍了基于javascript实现单选及多选的向右和向左移动,涉及javascript针对页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JavaScript正则表达式实例详解

    JavaScript正则表达式实例详解

    在编写处理字符串的程序或网页时,经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说,正则表达式就是记录文本规则的代码。
    2016-10-10

最新评论