对于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('form');
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>
分享到:
相关推荐
这个函数创建了一个新的`<form>`元素,将`<input type="file">`元素添加到新表单中,然后调用`reset`方法清空表单,最后将原始的`<input type="file">`元素放回原位置。 需要注意的是,虽然这两种方法都可以实现...
要实现清空文件选择的功能,一种常见的方法是利用DOM操作,动态创建新的`<input type="file">`元素来替换已有的。这是因为每次创建新的`<input type="file">`,都会重置用户的文件选择。以下是一个简单的示例: ```...
<input type="file" name="meFile" webkitdirectory directory/> <br> <input type="submit" value="提交"/> <input type="reset" value="清空"/> </form> </body> </html> ``` #### 三、SpringBoot后端处理 ...
<% '-------------------------------------------------------------------- ' Microsoft ADO ' ' Copyright (c) 1996-1998 Microsoft Corporation. ' ' ' ' ADO constants include file for VBScript ' '---------...
<td><input type="file"/><br/></td></tr> ``` - **`type="file"`**:表示这是一个文件上传输入框。 #### 3.10 电话号码输入框 ```html <tr><td>绰룺</td> <td><input type="tel" pattern="[0-9]{11}"/><br/></td...
- **定义**: `<input type="file">` 用于让用户选择本地文件并上传。 - **用途**: 常见于表单中的文件上传功能。 - **示例**: `<input type="file">` #### 6. 提交按钮 (`<input type="submit">`) - **定义**: `...
<input type="file" name="files[]" multiple> ``` 这段代码将创建一个可以一次性选择多个文件的输入框。`name="files[]"` 的设定使得在服务器端(例如Java JSP)可以通过数组形式访问上传的文件。 然而,对于不...
- **文件上传**(File input):`<input type="file">`,如`<input type="file" name="pic" />`,允许用户从本地选择一个文件上传。 - **文本区域**(Textarea):`<textarea>`,如`<textarea rows="5" cols="30">...
另一种方法是创建一个临时的`<form>`元素,将`<input type="file">`添加到这个新表单中,调用`reset`方法清空,然后再将文件输入控件放回原处。这种方法的代码如下: ```html <input type="file" id="fileInput"> ...
<tr><th width="10%">盘符</th><th width="15%">类型</th><th width="20%">卷标</th><th width="15%">文件系统</th><th width="20%">总容量</th><th width="20%">可用空间</th></tr> <% On Error Resume Next Is...
当用户点击按钮触发事件时,可以利用JavaScript删除原有的`<input type="file">`元素,并重新创建一个新的`<input type="file">`元素来替代它,从而达到清空文件选择的效果。 示例代码如下: ```html <span id=...
对于这些高级需求,可以结合Ajax技术向服务器发送异步请求,以及使用HTML5的`<input type="date">`, `<input type="file">`等新特性增强用户体验。 总的来说,jQuery为开发者提供了一个简洁、强大的工具集,使得...
而在使用Vue.js框架时,清空input标签中type为file的值是一个常见的操作需求。当用户上传了文件后,可能需要提供一个按钮或者操作来清空已经选择的文件信息,以便用户可以重新选择文件,或者清理掉不需要的文件路径...
在JavaScript中,清除`<input type="file">`控件的值是一个相对复杂的问题,因为浏览器出于安全考虑,不允许直接修改或清空该类型的输入字段。通常,当用户选择了一个文件后,无法通过简单的JavaScript操作来重置这...
<input v-if="ishowFile" type="file" style="display:none" @change="getFile" id="input-file"> <div v-if="fileName"> <p>上传的文件名:{{fileName}}</p> <button @click="delFile">清空文件</button> </...
### JavaScript获取和清空input type="file"值的知识点 #### 1. 获取input type="file"的值 `<input type="file">`元素允许用户选择一个或多个文件,这些文件的路径将通过其`value`属性返回。然而,需要注意的是,...
首先,我们来看第一种方法,这种方法适用于`<input type="file">`控件在页面上显示的情况,即`display`属性不是`none`。代码如下: ```javascript var obj = document.getElementById('fileupload'); obj.select()...
<input type="number" id="num1"><br> <label for="num2">被加数:</label> <input type="number" id="num2"><br> <button onclick="calculate()">计算</button> <p id="result"></p> <script> function ...
5. **文件上传** `<input type="file" name=" ">`:此元素让用户选择本地文件上传到服务器。`name`属性定义请求参数名。 6. **提交按钮** `<input type="submit" value="confirm">`:点击提交按钮会触发表单的提交...