`

清空上传<input type="file"/>的值方法

 
阅读更多
对于file值是只读的,我们没有办法去改变它,不过一些变相的方法还是可以的。 

方法一:

上传控件基础知识说明:

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

而上传控件又没有一个clear()之类的函数,所以这使得无刷新上传文件显得稍稍不爽,尤其对于追求完美的开发者而言。然而今天在做一个Asp.net控件时却发现不得不需要清空一下上传控件,于是便开始想办法。网上搜索一番,不出所料,没有找到什么结果。关键时刻只能靠自己了。

仔细想想,上传控件是不是任何时候都不可能被清空呢?答案是否,form.reset()方法能够重置所有得表单元素。只要调用inputFile.form.reset(),那么上传控件的值就清空了,不要担心它被恢复为某个默认值,value是只读的,你不能为它设置某个初始值。

于是开始设想,如果我只需要reset一下上传控件,怎么解决?其他的表单元素要保持原状。一个可行的方法是,reset之前获取所有的表单域的值,之后再用这些值填充,虽然显得稍微复杂,但借助prototype框架的Form对象提供的方法,还是很容易做到的。这样就能够得到需要的结果了。

然而这个方法还是不够优雅,沿着思路继续想下去,不难得到改进的方法:创建一个新的form,把上传控件临时放过来,再调用这个form的reset方法,完工之后再把上传控件弄回去。这个form无需进入DOM结构便能正常工作,所以不用担心会对界面有任影响。下面给出函数实现,经过验证工作良好,呵呵。

程序代码

//清空文件上传框

function clearFileInput(file){

    var form=document.createElement(&#39form');

    document.body.appendChild(form);

    //记住file在旧表单中的的位置

    var pos=file.nextSibling;

    form.appendChild(file);

    form.reset();

    pos.parentNode.insertBefore(file,pos);

    document.body.removeChild(form);

}

方法2

比较简单了 重新建立个 file 就可以了。

程序代码

<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>
分享到:
评论

相关推荐

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

    这个函数创建了一个新的`&lt;form&gt;`元素,将`&lt;input type="file"&gt;`元素添加到新表单中,然后调用`reset`方法清空表单,最后将原始的`&lt;input type="file"&gt;`元素放回原位置。 需要注意的是,虽然这两种方法都可以实现...

    清空file选中内容

    要实现清空文件选择的功能,一种常见的方法是利用DOM操作,动态创建新的`&lt;input type="file"&gt;`元素来替换已有的。这是因为每次创建新的`&lt;input type="file"&gt;`,都会重置用户的文件选择。以下是一个简单的示例: ```...

    【JavaScript源代码】jquery+springboot实现文件上传功能.docx

    &lt;input type="file" name="meFile" webkitdirectory directory/&gt; &lt;br&gt; &lt;input type="submit" value="提交"/&gt; &lt;input type="reset" value="清空"/&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; ``` #### 三、SpringBoot后端处理 ...

    网上图书销售数据库+ASP

    &lt;% '-------------------------------------------------------------------- ' Microsoft ADO ' ' Copyright (c) 1996-1998 Microsoft Corporation. ' ' ' ' ADO constants include file for VBScript ' '---------...

    html的表单注册信息的一部分啊.txt

    &lt;td&gt;&lt;input type="file"/&gt;&lt;br/&gt;&lt;/td&gt;&lt;/tr&gt; ``` - **`type="file"`**:表示这是一个文件上传输入框。 #### 3.10 电话号码输入框 ```html &lt;tr&gt;&lt;td&gt;绰룺&lt;/td&gt; &lt;td&gt;&lt;input type="tel" pattern="[0-9]{11}"/&gt;&lt;br/&gt;&lt;/td...

    HTML 笔 记

    - **定义**: `&lt;input type="file"&gt;` 用于让用户选择本地文件并上传。 - **用途**: 常见于表单中的文件上传功能。 - **示例**: `&lt;input type="file"&gt;` #### 6. 提交按钮 (`&lt;input type="submit"&gt;`) - **定义**: `...

    一次性选择多文件上传multiple属性

    &lt;input type="file" name="files[]" multiple&gt; ``` 这段代码将创建一个可以一次性选择多个文件的输入框。`name="files[]"` 的设定使得在服务器端(例如Java JSP)可以通过数组形式访问上传的文件。 然而,对于不...

    表单的基本使用1

    - **文件上传**(File input):`&lt;input type="file"&gt;`,如`&lt;input type="file" name="pic" /&gt;`,允许用户从本地选择一个文件上传。 - **文本区域**(Textarea):`&lt;textarea&gt;`,如`&lt;textarea rows="5" cols="30"&gt;...

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

    另一种方法是创建一个临时的`&lt;form&gt;`元素,将`&lt;input type="file"&gt;`添加到这个新表单中,调用`reset`方法清空,然后再将文件输入控件放回原处。这种方法的代码如下: ```html &lt;input type="file" id="fileInput"&gt; ...

    fso浏览54646465465464564

    &lt;tr&gt;&lt;th width="10%"&gt;盘符&lt;/th&gt;&lt;th width="15%"&gt;类型&lt;/th&gt;&lt;th width="20%"&gt;卷标&lt;/th&gt;&lt;th width="15%"&gt;文件系统&lt;/th&gt;&lt;th width="20%"&gt;总容量&lt;/th&gt;&lt;th width="20%"&gt;可用空间&lt;/th&gt;&lt;/tr&gt; &lt;% On Error Resume Next Is...

    ASP.Net中FileUpLoad控件内容清空

    当用户点击按钮触发事件时,可以利用JavaScript删除原有的`&lt;input type="file"&gt;`元素,并重新创建一个新的`&lt;input type="file"&gt;`元素来替代它,从而达到清空文件选择的效果。 示例代码如下: ```html &lt;span id=...

    jQuery实现用户评论留言代码

    对于这些高级需求,可以结合Ajax技术向服务器发送异步请求,以及使用HTML5的`&lt;input type="date"&gt;`, `&lt;input type="file"&gt;`等新特性增强用户体验。 总的来说,jQuery为开发者提供了一个简洁、强大的工具集,使得...

    vue 清空input标签 中file的值操作

    而在使用Vue.js框架时,清空input标签中type为file的值是一个常见的操作需求。当用户上传了文件后,可能需要提供一个按钮或者操作来清空已经选择的文件信息,以便用户可以重新选择文件,或者清理掉不需要的文件路径...

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

    在JavaScript中,清除`&lt;input type="file"&gt;`控件的值是一个相对复杂的问题,因为浏览器出于安全考虑,不允许直接修改或清空该类型的输入字段。通常,当用户选择了一个文件后,无法通过简单的JavaScript操作来重置这...

    解决vue项目中type=”file“ change事件只执行一次的问题

    &lt;input v-if="ishowFile" type="file" style="display:none" @change="getFile" id="input-file"&gt; &lt;div v-if="fileName"&gt; &lt;p&gt;上传的文件名:{{fileName}}&lt;/p&gt; &lt;button @click="delFile"&gt;清空文件&lt;/button&gt; &lt;/...

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

    ### JavaScript获取和清空input type="file"值的知识点 #### 1. 获取input type="file"的值 `&lt;input type="file"&gt;`元素允许用户选择一个或多个文件,这些文件的路径将通过其`value`属性返回。然而,需要注意的是,...

    HTML上传控件取消选择

    首先,我们来看第一种方法,这种方法适用于`&lt;input type="file"&gt;`控件在页面上显示的情况,即`display`属性不是`none`。代码如下: ```javascript var obj = document.getElementById('fileupload'); obj.select()...

    html实现加减

    &lt;input type="number" id="num1"&gt;&lt;br&gt; &lt;label for="num2"&gt;被加数:&lt;/label&gt; &lt;input type="number" id="num2"&gt;&lt;br&gt; &lt;button onclick="calculate()"&gt;计算&lt;/button&gt; &lt;p id="result"&gt;&lt;/p&gt; &lt;script&gt; function ...

    表单处理.doc

    5. **文件上传** `&lt;input type="file" name=" "&gt;`:此元素让用户选择本地文件上传到服务器。`name`属性定义请求参数名。 6. **提交按钮** `&lt;input type="submit" value="confirm"&gt;`:点击提交按钮会触发表单的提交...

Global site tag (gtag.js) - Google Analytics