使input type="file" 不可编辑

本文介绍了解决HTML文件上传控件在不同浏览器中可编辑性不一致的方法。通过两种方式实现文件输入框不可编辑同时保留浏览按钮可用:一是采用变通处理,二是增加contenteditable属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天在做项目的时候,遇到上传文本框的问题,
<input type="file" size="100" name="photoupload" />
在firefox中,该控件产生的文本框是默认不可编辑的,但是在IE下,该文本框可编辑,
根据用户需要,此文本框应为不可编辑。
但是直接将其设置为“readonly”或者“disabled”后,对应的浏览按钮也无法使用了。所以此法不通。

在网上搜索了一些资料,主要有以下几种方法:
1.变通处理:
<input type=file id=a1 style="visibility:hidden">
<input id=a2 type=text readonly>
<input type=button value=浏览 onclick="a1.click(); a2.value= a1.value">
2.增加如下属性:
contenteditable="false"

 实例代码:

<input type="file" style="width: 446px" id="ptlFile" contenteditable="false"/>

对比一下,第二种简单方便,问题解决。

 

转自:http://www.blogjava.net/sealyu/archive/2009/03/10/231620.html

### HTML `input` 类型为 file 的使用方法和属性 #### 基本定义 HTML 中的 `<input>` 元素当其 `type` 属性被设为 `file` 时,允许用户通过图形界面选择本地计算机上的一个或多个文件。最简单的形式如下所示[^1]: ```html <input type="file"> ``` #### Capture 属性的应用 为了简化移动设备上多媒体内容的选择过程,可以利用 `capture` 属性来指示应直接从用户的摄像头或其他捕捉装置获取图像数据而不是仅限于已存储的照片或视频。例如,下面这段代码会提示访问者拍照并上传图片[^2]: ```html <input type="file" capture="camera" accept="image/*"> ``` #### 获取选定文件的信息 一旦选择了文件,可以通过 JavaScript 访问这些文件的相关信息,比如文件名称。这里展示了一个简单的方法用于读取所选文件的名字[^3]: ```javascript let fileName = document.querySelector("input[type='file']").files[0].name; console.log(fileName); ``` 值得注意的是,在某些旧版浏览器中可能无法完全支持上述功能。 #### 文件筛选机制——Accept 属性 为了让用户体验更加友好,开发者还可以借助 `accept` 属性指定可接受的文件类型列表,从而只显示符合条件的选项给最终用户。此特性依据 MIME 类型或者特定扩展名来进行过滤操作[^4]: ```html <!-- 接受JPEG 和 PNG 图片 --> <input type="file" accept=".jpg,.jpeg,.png"> <!-- 或者按照MIME类型 --> <input type="file" accept="image/jpeg,image/png"> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值