根据输入的type=file值隐藏/显示
根据输入的type=file值隐藏/显示是指根据HTML表单中的文件输入字段的type属性值来控制文件选择框的显示与隐藏。
当type=file时，浏览器会显示一个文件选择框，允许用户选择本地文件。而当type不为file时，浏览器则不会显示文件选择框。
这个功能通常用于动态控制表单的显示与隐藏，根据不同的条件来决定是否需要用户上传文件。例如，当用户选择了某个选项时，显示文件选择框，否则隐藏文件选择框。
在前端开发中，可以通过JavaScript来实现根据type=file值隐藏/显示的功能。以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<script>
function toggleFileInput() {
var fileInput = document.getElementById("fileInput");
var typeValue = document.getElementById("typeInput").value;
if (typeValue === "file") {
fileInput.style.display = "block";
} else {
fileInput.style.display = "none";
}
}
</script>
</head>
<body>
<label for="typeInput">Type:</label>
<select id="typeInput" onchange="toggleFileInput()">
<option value="text">Text</option>
<option value="file">File</option>
</select>
<input type="file" id="fileInput" style="display: none;">
</body>
</html>在上述代码中，通过监听typeInput的onchange事件，调用toggleFileInput函数来切换fileInput的显示与隐藏。当typeInput的值为file时，fileInput的display属性被设置为block，显示文件选择框；否则，display属性被设置为none，隐藏文件选择框。
这样，根据输入的type=file值隐藏/显示的功能就实现了。
推荐的腾讯云相关产品：腾讯云对象存储（COS）
- 概念：腾讯云对象存储（COS）是一种海量、安全、低成本、高可靠的云存储服务，适用于存储大量非结构化数据，如图片、音视频、文档等。
- 分类：云存储服务
- 优势：高可靠性、低成本、安全性高、可扩展性强
- 应用场景：网站图片、音视频存储、大数据分析、备份与恢复等
- 产品介绍链接地址：https://cloud.tencent.com/product/cos
相关·内容
我有一个输入框，我想让用户点击输入框来显示打开的文件对话框，并在相同的输入框中显示文件名。但是如果我使用输入文件“type=”，它会显示“选择文件按钮”，我不想显示这个按钮。我该怎么做呢？
html：
<div class="fileupload">
<input type="file" class="file" name="image" />
</div>
<div class="fileupload">
<input type="f
浏览 1提问于2013-10-11得票数 5
回答已采纳
1回答
我有一个名为DataJuggler.Blazor.FileUpload (https://github.com/DataJuggler/BlazorFileUpload)的开源项目和Nuget包。 使用Chrome，下面的代码会显示一个自定义的文件上传按钮： <FileUpload CustomSuccessMessage="Your file uploaded successfully." OnChange="OnFileUploaded"
OnReset="OnReset" ResetButtonClassName="
浏览 18提问于2020-04-01得票数 0
User.add({
name: { type: Types.Name, required: true },
userid: { type: Types.Text, initial: true, required: true },
exceed_login_attempt: {
type: Types.Boolean,
default: false,
label: 'Exceeded Invalid Login Attempts',
dependsOn: { exceed_login_a
浏览 0提问于2018-02-23得票数 2
1回答
如何在输入type=“文件”倍数中从v模型数组中获取数据？
<input type="file" multiple v-model="modFiles[index]">
<input type="file" multiple v-model="modFiles[index]">
<input type="file" multiple v-model="modFiles[index]">
我使用的是v循环，我可以从每个modFiles[]获取第一个数据。
this.
浏览 0提问于2018-02-02得票数 3
1回答
我有一个带有输入字段的表单。其中之一是文件上传域。当用户提交表单时，将验证每个字段，并使用错误消息重新加载页面，但所有其他字段仍显示用户输入。现在我希望，一旦用户选择了一个文件，表单由于其他错误而无法验证，选择的文件在重新提交后仍将上载。
我使用value属性显示输入的值。我知道由于安全问题，您不能设置文件输入的值。
这是我到目前为止所得到的：
<?php
if(isset($fileUpload))
{
echo "<span>selected File: ".$fileUpload["name"]."<span>
浏览 1提问于2015-02-13得票数 2
它是一个过滤器，两个输入同时使用相同的ng模型：
<!-- Number input -->
<input
type="number"
maxlength="5"
step="0.25"
min="-10"
max="10"
placeholder="0.00"
ng-model="sphere">
<!-- Range Input -->
<input type="range" ng-model="sphere&
浏览 3提问于2017-05-22得票数 2
我需要保存来自display:table内部输入标记的数据。我期待一些侦听器或一些机制来处理我当前显示的表。请给我引路。谢谢
使用的技术: Struts 1.2、显示标记库、jsp。
代码：
<display:column style="text-align: left;" class="align_left" property="masterAppQuestions.quesDescription" title="Performance Criteria" headerClass="sortable
浏览 1提问于2013-05-23得票数 2
回答已采纳
我希望在输入更新表单时显示以前选择的值。我是用输入法做的，但我不能用下拉式来做。请帮助我如何让选定的值下拉。
@foreach (var item in Model){
<td><input class="form-control" type="text" value="@item.Deiscreption" name="Deiscreption" required autocomplete="off" /&
浏览 1提问于2021-09-26得票数 1
回答已采纳
1回答
我试图在选中/取消复选框后显示/隐藏我的输入，但是我从DB获得了这个信息，因此，我使用PHP向我的输入添加“选中”属性。
jQuery代码正在工作，但是当我刷新页面时，即使在属性选中“已启用”时，我的输入也不会显示。
PHP代码
<label>Send cash?</label>
<input class="reg_cash" type="checkbox" name="reg_cash" value="1"
<?php echo ($configs->reg_cash) ?
浏览 2提问于2016-02-14得票数 2
回答已采纳
1回答
我想通过pywebio构建一个web应用程序，询问设备的配置，以找到最适合其数据的配置。在这个应用程序中，我们必须选择我们想要使用的算法来找到最适合的算法。我希望能够输入配置，并有一个按钮，以添加尽可能多的新的适合类型在同一页。对于多个输入，我使用了input_groups()，但我不知道如何在其中添加动态的新输入字段。我尝试使用“待办事项列表”官方演示，但它只有一个输入，我希望所有的输入和动态输入在同一页。我希望我是清楚的，在照片中，我想有类似红色的部分，我可以添加多少适合类型，我不需要去一个新的页面，当我按下添加按钮，幻灯片输入应该会出现，我可以从选项中选择。请告诉我，我应该如何定义新的输
浏览 6提问于2021-11-24得票数 0
下面我有一个文件输入和两个javascript函数，控制文件上传的开始和停止。
文件输入：
var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' >"
浏览 4提问于2013-01-23得票数 0
回答已采纳
3回答
我正在使用formmail.php的一个功能，它允许我使用一个隐藏的输入，该输入将重命名用户上传的文件。这样，我可以保留真实公司名称的值，同时从合成的文件名中删除非法字符。
我已经写了一个函数，它可以进行适当的替换，并将新值赋给一个字符串变量，这样我就可以在隐藏的输入上使用。如下所示：
<input type="text" id="CompanyName" name="CompanyName" size="60" maxlength="40" onchange="clean(this.value)&#
浏览 10提问于2016-08-24得票数 0
输入字段和删除按钮是由php循环生成的！
要获取输入的值并将其发送给php，我使用以下代码: Html：
<input type="hidden" name="file_id" id="<?php echo $file_id; ?>" value="<?php echo $file_id; ?>" />
<button class="btn btn-sm btn-danger delete" type="submit" name="delete_fi
浏览 0提问于2019-12-28得票数 0
回答已采纳
如何显示图片拇指从输入类型文件没有上传，或与我需要创建文件预览，当用户选择文件在输入type=file，我发现，ajax不支持文件上传，所以-也许可以显示拇指_without_actual_upload_在js？Jquery/简单的js
浏览 2提问于2010-08-19得票数 3
1回答
可访问隐藏文件输入
、、、
我试图找出替换<input type='file' />的方法，并将其替换为上述输入本身的可访问性。
的问题是：--我可以用这两种方式--还是type='file'是可访问键的关键？
我的方法：
我基本上让浏览器忘记了type='file'在CSS中的存在：
input[type=file] {
display: none;
visibility: hidden;
opacity: 0;
height: 0;
width: 0;
position: absolute;
top:
浏览 1提问于2017-06-26得票数 1
回答已采纳
2回答
我使用一个按钮隐藏/显示(切换)一个div：
<button type="button" ng-click="toggleBuilder()" class="btn btn-primary">Hide Div queryBuilder</span></button>
<input type="text" class="form-control" id="searchField" ng-model="output"/>
<div
浏览 2提问于2015-06-10得票数 0
回答已采纳
1回答
我希望能够根据输入元素的值测试employee ID的值。
<input type="hidden" id="pEmployeeID" />
@foreach (var item in Model)
{
if (item.EmployeeID = #pEmployeeID.value)
{
}
}
我这样做是因为我有一个div显示在视图的顶部，作为一个模式弹出。我希望能够将某个值从视图转移到div。为此，我使用jQuery将隐藏输入标记的值设置为要从视图传递到视图中的div的值。
浏览 0提问于2019-07-31得票数 0
回答已采纳
我试着用first name、last name、gender等字段(单选按钮)、类别作为下拉列表(包含基本字段)和高级选项(如english、science、maths、general knowledge等)来生成PHP结果，所有这些字段都有输入type=text来填充分数，在类别下拉列表旁边有一个按钮名get。
因此，如果我们选择basic并按get按钮，那么它应该显示english和general knowledge，如果我们选择前进，按get按钮应该显示maths和science。
现在，如果我们输入提交按钮，那么它应该跳到下一页，应该有类别作为下拉列表，如果我们选择前进，那么它应该显
浏览 1提问于2017-01-03得票数 0
回答已采纳
1回答
我已经创建了一系列表单，供用户在数据库中添加和编辑记录。数据库包括音频和图像文件名(实际文件在提交时被移动到文件夹中)。
我的问题是我不能让文件名显示在编辑表单上。这意味着除非用户再次上传文件，否则这些字段在数据库中是空白的！我知道"type='file'“不接受"value”属性。通过在文本区域中显示php变量，我可以在我的文本区域中解决这个问题。我试过使用文件名，它们确实显示了，但在输入框之外，这意味着...参见上文，数据库中的空白字段。
下面是我使用的代码：
<li>
<label for=se_ogg">Sound
浏览 0提问于2011-09-25得票数 0
回答已采纳
1回答
我将用于file输入字段。以下是我的代码：-
<input id="input-upload-img1" type="file" class="file" data-preview-file-type="text" name="img1" accept='image/*,video/*'>
<input id="input-upload-img2" type="file" class="file" data-preview-file
浏览 1提问于2016-06-07得票数 0
回答已采纳
<div class="content">
<div class="row" style="margin-top: 27px;">
<div class="col-sm-2" style="width: 13%;">
<select id = "app" class="form_input_box">
<option value="" s
浏览 4提问于2022-08-22得票数 -1
3回答
MVC3文件输入
、、
我正在尝试使用html文件输入来获取文件的路径和名称。然而，我不想上传文件，并且看到文件可能非常大，我也不想仅仅为了获得文件名而将文件数据传递回服务器。
有没有办法将文件输入值绑定到我的模型中的属性，或者至少将文件名传递回服务器？
下面是我的代码：
@using (Html.BeginForm("Upload", "Management", FormMethod.Post , new {enctype="multipart/form-data"})) {
<div>
Upload New Pricing Wor
浏览 0提问于2011-08-10得票数 0
回答已采纳
嗨，我在表单中有一个隐藏的输入
<td>
<input id="total" class="totalD" type="hidden" value="$394,655.00">
</td>
我想在另一个单元格中显示这个值。
<td><input type="text"" class="" name="sum" id="tDir" value="" /></td>
使用以下
浏览 3提问于2013-10-25得票数 0
回答已采纳
2回答
是否有一种基于HTML中选择列表/下拉列表的值来显示HTML输入元素的方法？因此，一旦选择了其中一个下拉值，就会弹出另一个输入标记。我想要的是，一旦其中一个值被选中，就会弹出另一个输入标记，并且基于select值，它将是某种类型的输入类型标记。
如果选择了某个值，我就可以通过显示和隐藏输入标记来完成这项工作，所以我可以在表单标记中使用它，但是我似乎不知道如何让类似的东西工作。以下是我正在努力实现的逻辑：
if dropdown value is 'playswound'
then show input tag type=file
if dropdown value is
浏览 4提问于2017-04-21得票数 0
回答已采纳
2回答
我有这个HTML代码：
<div class="field">
<input type="hidden" value="" name="a" id="a"> <input type="hidden" value="xxxx" name="b" id="b">
<input type="file" value="" name="file1
浏览 0提问于2012-11-19得票数 2
回答已采纳
我有下面的代码结构，如何单击编辑按钮来显示/隐藏该表的3个文件输入字段？
默认情况下，所有这些文件输入字段都是隐藏的。如果我按下第二个表格内的编辑按钮，则只会显示第二个表格内的3个输入。
<table>
<input type="file" name="product" class="editThis" />
<input type="file" name="color" class="editThis" />
浏览 2提问于2013-06-26得票数 1
2回答
我想在重力表单中添加一个隐藏的输入域，如下所示：
<input type="hidden" id="Campaign_ID" name="Campaign_ID" value="ABCD">
其中"ABCD“是一个可以在重力表单界面中更改的值。
任何提示/想法
谢谢!
浏览 2提问于2015-12-19得票数 0
1回答
html搅拌器和更改按钮
、、、
如何更改图像输入onclick的src并创建一个搅局器？我希望这件事发生：
(按钮显示:显示) <-此按钮将显示图像1
一旦点击，它将显示一个带有不同图像的按钮
(按钮显示:隐藏) <-此按钮将显示图像2
唯一的问题是，我希望更改按钮图像的src，但不希望更改按钮输入的值，因为我使用的是图像输入，而不是按钮。下面是我当前的代码：
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagNam
浏览 6提问于2014-03-16得票数 0
1回答
<form method="post" class="form-horizontal" role="form">
<div class="btn-group col-sm-3">
<button id="typeSelect" type="button" name="reportType" class="btn btn-default dropdown-toggle" data-toggle="dropdo
浏览 2提问于2014-05-27得票数 2
回答已采纳
表格1:
<?php
echo $this->upload_message;
?>
<form enctype="multipart/form-data" method="post" name="mfuploaderwp-uploadform" action="?uploadfile">
Upload file: <input name="mfuploadwp-filename" type="file">
<input class="mfupl
浏览 0提问于2016-02-02得票数 0
回答已采纳
我对自定义post类型('event')有一些自定义的元值。自定义post类型显示在admin中，并且自定义元字段显示得很好。我使用save_post_{$post->post_type}钩子来验证元字段，并根据元字段和新设置的post_status的验证将post_status更改为draft (使用wp_update_post)。
问题：
所有的事情都在工作，除了右上半部分(在管理职位编辑页面)不反映状态的变化。如果我发布了一篇文章，验证将post_status设置为draft，这取决于save_post_{$post->post_type}中的设置条件。但用户
浏览 0提问于2023-02-20得票数 0
我从未使用过datalist，我只想在写入的值不在datalist中时才显示文件类型输入。这是我的代码： <input list="customer" name="customer">
<datalist id="customer">
<option value="Customer 1">
<option value="Customer 2">
<option value="Customer 3">
<
浏览 14提问于2020-01-23得票数 0
1回答
我正在建立一个网站，用户可以上传图片。我不想使用像SWFUpload或Uploadify这样的flash插件，但我希望他们能够一次上传多张图片。这将导致我使用带有multiple=""属性集的文件输入。问题是，用户只能从其计算机上的同一目录中选择多个图像。
为了应对这一点，我有了一个涉及Javascript的想法。我的页面上有一个设置了multiple属性的文件输入，当用户使用该文件输入选择一些文件时，我就用CSS隐藏它。在此之后，我使用Javascript将一个新的文件输入放在它的位置，用户可以使用它从不同的目录上传更多的文件。这样，当用户有了他们想要上传的所有图像时，我就有
浏览 2提问于2011-08-24得票数 0
回答已采纳
1回答
我有两个表单，我希望将第一个文件输入复制到另一个表单，以便servlet能够获得参数。
<form id="UploadExcel" >
<input id="file" name="file" type="file" />
<input type="submit" value="upload" />
</form>
浏览 4提问于2016-06-12得票数 2
1回答
我读过很多类似这个问题的票，但似乎没能得到我想要的工作。所以我不得不问这个问题。
我在HTML页面上有两个表单和两个按钮。这两种表单都使用内联样式隐藏:style=“显示:无；”
我想做的是用按钮1显示表单1，隐藏表单2，按钮2隐藏表单1，显示表单2。下面是按钮1：
<button type="button" id="button7">Click Here If your Serial Number is 549999 or Below</button>
这是按钮2：
<button type="button" id
浏览 2提问于2015-02-12得票数 0
回答已采纳
我使用上传，所有的工作，但我想改变我的隐藏输入值上传文件名一旦它被上传。有5张图片，我一次上传，我想一个接一个地附加它们。
<input type="file" id="file_upload" name="file_upload" />
<input type="hidden" name="image1" id="image1" />
<input type="hidden" name="image2" id="image5&#
浏览 5提问于2013-09-26得票数 0
回答已采纳
当用户单击文件输入时，系统会使用标准文件选择器进行提示，一旦选中，就会开始上传。我有一个自定义进度条，一旦它达到100%，它会显示图像预览。但是，文件选择器仍然存在。我想在预览显示后隐藏它。我习惯于使用jQuery，这样你就可以通过类或ID选择元素，然后隐藏它，但不要相信它与react一样好和容易。这是可能的吗?还是我需要使用state来实现？必须使用状态似乎有点过分了。 下面的代码显示了上传文件后的进度条和预览图像。 {file && <ProgressBar file={file} setFile={setFile} />}
浏览 21提问于2021-02-03得票数 1
回答已采纳
2回答
以下问题:在表单提交之前，需要在表单的输入字段中放置一个值。我使用jQuery submit()函数来处理这个问题。点击submit之后，输入值将直观地显示在输入字段中，但是当表单被发送时，我的输入字段中没有设置值。我的验证处理程序说这个字段是必需的。
下面是我代码的相关部分：
HTML:
<form id="form" method="POST">
<input id="gps_daten" type="file">
<input id="input" type=
浏览 8提问于2019-12-14得票数 0
回答已采纳
<form method="post" id="user_form">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
浏览 1提问于2020-04-02得票数 0
回答已采纳
1回答
如何在文件上载后显示隐藏的输入值
、、、、
var $fileVideo = $("<form action='videoupload.php' method='post' enctype='multipart/form-data' target='upload_target_video' onsubmit='return videoClickHandler(this);' class='videouploadform' >" +
"Video File: <input name='
浏览 7提问于2013-01-20得票数 0
回答已采纳
在使用react的应用程序中，我有一个带有form输入的radio，它选择将呈现哪个组件，但是当我更改收音机选项时，这个警告会显示出来-
组件正在更改要控制的类型文件的不受控制的输入。输入元素不应从不受控制的输入转换为受控的输入(反之亦然)。决定在组件的生命周期中使用受控的还是不受控制的输入元素
表单
import React, { useState } from "react";
export default () => {
const [link, setLink] = useState("");
con
浏览 0提问于2020-07-15得票数 2
回答已采纳
1回答
我正在创建一个虚拟网络应用程序，我有一个简单的文件输入，但有一些逻辑，因为有人可以隐藏或显示文件输入。问题是，一旦隐藏文件输入，并再次显示，它将删除文件名。文件名不显示，而变量仍然保存文件。
这是一些相关的代码和演示它。
<div id="app">
<button @click="switch1=!switch1">switch1</button>
<div v-if="switch1">
<h4>Select an image</h4>
<i
浏览 6提问于2017-04-25得票数 1
回答已采纳
1回答
当我选择要上传的文件时，我想要显示进度条或微调器，我不是在谈论服务器上传成功，我已经介绍了这一点，我想在从输入文件中单击“选择文件”按钮后立即加载图像时显示微调器，这是可能的吗？我使用的是vue，所以请不要使用jquery lol
<label class="modal_input_image fs_normal c_dark" :for="field.id" :style="'background-image:url('+backgroundImage+');'"></label>
<
浏览 17提问于2019-11-22得票数 2
我将ajax和代码点火器混合在一起来执行多个插入。
代码如下所示：
JS
function save(path){
$.ajax({
url: "<?php echo site_url('members/megumi/container_list/import_from_csv'); ?>",
type: 'post',
data: {path: path},
success: function (response) {
reload_ta
浏览 2提问于2016-05-09得票数 1
我从一个Http请求中填充一个表单，但是当表单第一次呈现时，它会在输入中显示对象对象几毫秒，然后它会显示输入的值。
这是我在.ts文件中得到的：
this.customerInitialSvc.getInitialData().subscribe((data: InitialData) => {
const { Data } = data;
this.datosInicialesForm.patchValue({
primerNombre: Data['firstName'],
segundoNombre: Data
浏览 18提问于2021-03-10得票数 0
1回答
我想要一个单选按钮的功能，但有一个基于图像选择的选项。例如，我将有一个标签(付款方式)。我想设置各种DIV/图像与每个接受的付款(信用卡/卡，PayPal，西联等)。而不是选择一个小圆圈单选按钮，而是他们只需单击图像，并有一个边框或图像更改，以表明该方法已被选择。
如果我可以用一个DIV元素来实现这个功能，那就更好了，这样我就可以在DIV中添加任何我想要的东西(文本、图像等)，并让DIV本身具有某种显示在选定内容上的边框。
使用输入type=radio可以做到这一点吗？如果这不可能使用无线电，那么您将如何建议实现此功能？如果已经实施，请链接:)
浏览 0提问于2010-08-17得票数 3
回答已采纳
根据LOB代码，我有三个非常不同的报告要显示。LOB不是输入参数，如果可能的话，我希望避免它成为输入参数。我也不想创建三个单独的报告。相反，我希望我的报告能够接受用户输入，读取数据库以确定LOB，并为LOB显示适当的子报表。这可行吗？我能找到的唯一方法就是将LOB作为参数，并根据该参数显示\隐藏子报表。
浏览 4提问于2022-02-10得票数 1
我有一个问题，我不能摆脱它，所以请帮帮我。我有一个输入IMG，我有一个脚本，显示我选择的图像。但是当输入为空时，image属性显示一个黑色边框。不能摆脱黑色边框。这非常令人沮丧。那么，如果没有选择输入，如何删除边框或图像属性呢？帮帮我! `<img id="uploadPreview" style="width: 100px; height: 100px;" /> <input id="imgInp" type="file" name="myPhoto" onchange="Previe
浏览 14提问于2020-03-27得票数 0
我有两个类型为文本和隐藏的输入元素。
<c:forEach items="seaList" var="sList" varStatus="myIndex">
<td style="font-size: 9pt">
<input name="CM_name" id="CM_name${myIndex.index}" type="text" value="${sList.cm_
浏览 12提问于2017-07-12得票数 0
2回答
我有一些输入fields.But的输入字段将显示一次。我会得到我需要的信息，如下所示。
require_nid:false
require_pin:true
发件人如下
<ion-col>
<ion-list inset>
<ion-item>
<ion-label>
<ion-icon name="person"></ion-icon>
</ion-label>
浏览 0提问于2018-05-20得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
