Javascript 如何单击行上有按钮的隐藏输入文件

我需要将原始的输入类型=文件替换为具有引导样式的。其思想是首先使用jquery隐藏来隐藏它。然后用按钮触发它

当只有一个按钮时，一切正常。但每当添加另一个按钮时。选择对话框根据文件输入的数量保持显示

我需要每个按钮来选择它的输入文件。所以我用通配符选择器给它一个唯一的id。但它仍然不起作用。这是密码

HTML

此处演示：

---

请帮帮我

如果您想要多个id，最好不要使用id！ 试试这个 注意：这是一个快速破解，不可重复使用

JavaScript

$(document).ready(function () {
$('input[id^=file]').hide();
$('.browse').click(function () {
    console.log(this);
    $(this).closest('form').find('input[id^=file]').click();
})
});

HTML

---

如果你想要更多的话，最好不要使用id！ 试试这个 注意：这是一个快速破解，不可重复使用

JavaScript

$(document).ready(function () {
$('input[id^=file]').hide();
$('.browse').click(function () {
    console.log(this);
    $(this).closest('form').find('input[id^=file]').click();
})
});

HTML

试试这个：

$(document).ready(function () {
$('input[id^=file]').hide();
$('.btn.btn-primary').click(function () {
    $(this).prev('input').click();
})
});

工作小提琴：试试这个：

$(document).ready(function () {
$('input[id^=file]').hide();
$('.btn.btn-primary').click(function () {
    $(this).prev('input').click();
})
});

工作小提琴： 这个JavaScript应该可以工作，试试看

这个JavaScript应该可以工作，试试看

---

当我尝试你的JSFIDLE时，我点击了1个按钮，弹出了3个文件浏览器，所以你的按钮触发了evrey文件输入。请尝试以下方法：

$(document).ready(function () {
    $('input[id^=file]').hide();
    $('button[id^=browse]').click(function () {
        $(this).prev('input[type=file]').click();
    })
});

---

当我尝试你的JSFIDLE时，我点击了1个按钮，弹出了3个文件浏览器，所以你的按钮触发了evrey文件输入。请尝试以下方法：

$(document).ready(function () {
    $('input[id^=file]').hide();
    $('button[id^=browse]').click(function () {
        $(this).prev('input[type=file]').click();
    })
});

---

好的，这个答案可能有点离题，但它是关于方法的。下面是大多数处理/替换上传按钮的jQuery插件的工作

赤裸裸的例子

HTML:-

工作演示：

---

如果你需要进一步增强按钮的功能，而这些功能正是你所需要的，也许不必重新发明轮子就能加快你的工作流程，如果你正在学习，那么你应该继续尝试，并将已经完成的产品作为参考。

好的，这个答案可能有点离题，但它是关于方法的。下面是大多数处理/替换上传按钮的jQuery插件的工作

赤裸裸的例子

HTML:-

工作演示：

如果您需要进一步增强按钮的功能，而这些功能正是您所需要的，也许不必重新发明轮子就能加快您的工作流程，如果您正在学习，那么您应该继续尝试，并将已经完成的产品作为参考。

您可以使用该功能获取文件输入。 //$document.readyfunctionhz $document.readyfunction{ $'input[id^=file]'。隐藏； $'a[id^=browse]'。单击函数{ $this.prev'input[type=file]'。单击； } }; div.content div.btns\u包装div.item{ 宽度：33%； 显示：内联块； 文本对齐：居中； } @媒体屏幕和最大宽度：1171px{ /*第179行-RtixBalkanStudioXConvert*/ div.content div.btns\u包装div.item.index{ 显示：无； } } /*第185行-RtixBalkanStudioXConvert*/ div.content div.btns\u包装div.item.first{ 文本对齐：左对齐； } /*第188行-RtixBalkanStudioXConvert*/ div.content div.btns\u包装div.item.last{ 文本对齐：右对齐； } /*第193行-RtixBalkanStudioXConvert*/ div.content div.textarea\u包装器{ 边缘顶部：15px； 边缘底部：165px； } 您可以使用该函数获取文件输入。 //$document.readyfunctionhz $document.readyfunction{ $'input[id^=file]'。隐藏； $'a[id^=browse]'。单击函数{ $this.prev'input[type=file]'。单击； } }; div.content div.btns\u包装div.item{ 宽度：33%； 显示：内联块； 文本对齐：居中； } @媒体屏幕和最大宽度：1171px{ /*第179行-RtixBalkanStudioXConvert*/ div.content div.btns\u包装div.item.index{ 显示：无； } } /*第185行-RtixBalkanStudioXConvert*/ div.content div.btns\u包装div.item.first{ 文本对齐：左对齐； } /*第188行-RtixBalkanStudioXConvert*/ div.content div.btns\u包装div.item.last{ 文本对齐：右对齐； } /*第193行-RtixBalkanStudioXConvert*/ div.content div.textarea\u包装器{ 边缘顶部：15px； 边缘底部：165px； }

---

假设每个文件输入标记都在其自己的表单标记中，因为您的示例是结构化的，您可以使用函数获取表单，然后使用该函数作为上下文来查找文件输入标记。这意味着表单标记中的结构不必像函数所要求的那样将文件输入保持在按钮标记之前，也不必像函数所要求的那样将按钮固定在表单标记的特定深度。此外，我建议的方法是从卫生部获得信息

$document.readyfunction{ $'input[id^=file]'。隐藏； $'按钮[id^=browse]'。单击函数{ 单击console.log:+this.attrid； console.logClosest:+$this.closestform.attrid； console.logFile from:+$this.closestform.find'input[id^=file].attrid； $this.closestform.find'input[id^=file]。单击； } }; 文件上传1。 上载 文件上传2。 上载 文件上传3。 上载

---

假设每个文件输入标记都在其自己的表单标记中，因为您的示例是结构化的，您可以使用函数获取表单，然后使用该函数作为上下文来查找文件输入标记。这意味着表单标记中的结构不必像函数所要求的那样将文件输入保持在按钮标记之前，也不必像函数所要求的那样将按钮固定在表单标记的特定深度。此外，我建议的方法是从卫生部获得信息

$document.readyfunction{ $'input[id^=file]'。隐藏； $'按钮[id^=browse]'。单击函数{ 单击console.log:+this.attrid； console.logClosest:+$this.closestform.attrid； console.logFile from:+$this.closestform.find'input[id^=file].attrid； $this.closestform.find'input[id^=file]。单击； } }; 文件上传1。 上载 文件上传2。 上载 文件上传3。 上载

---

我不知道为什么每个人都在使用JavaScript来完成这个简单的任务

只需在不使用任何JavaScript的情况下使用HTML元素，如下所示：

按钮文本

---

我不知道为什么每个人都在使用JavaScript来完成这个简单的任务

只需在不使用任何JavaScript的情况下使用HTML元素，如下所示：

按钮文本

---

ID必须是唯一的您可以使用CSS来设置标签的样式。和隐藏文件输入/按钮。“这样应该很好。不管怎样，谢谢你，”安德烈维斯说。但这不是重点ID必须是唯一的您可以使用CSS来设置标签的样式。和隐藏文件输入/按钮。“这样应该很好。不管怎样，谢谢你，”安德烈维斯说。但这不是重点你警告不要使用重复的ID，但是你的答案和小提琴都有。rsvmrk和Robert Rozas方法都在工作。但是@Robert是第一个。谢谢大家。谢谢，正如我说的，这是一个快速的破解。如果需要更多的元素，最好不要使用id。我不会删除浏览元素，因为CSS将其用于HTML设计。你最好也使用CSS类。你警告不要使用重复的ID，但是你的答案和小提琴都有。rsvmrk和Robert Rozas方法都可以工作。但是@Robert是第一个。谢谢大家。谢谢，正如我说的，这是一个快速的破解。如果需要更多的元素，最好不要使用id。我不会删除浏览元素，因为CSS将其用于HTML设计。你最好也上CSS课。你能详细说明这个答案吗？您对javascript代码中的任何内容进行了更改并不是很明显。关于$this.prev'input[type=file]'的说明。单击并说明为什么这样做会很好。您能详细说明这个答案吗？您对javascript代码中的任何内容进行了更改并不是很明显。关于$this.prev'input[type=file]'的说明。单击并说明为什么这样做很好。只有当文件输入正好位于按钮标记之前时，这样做才有效，按钮标记可能会更改。只有当文件输入正好位于按钮标记之前时，这样做才有效，按钮标记可能会更改。

$(document).ready(function () {
    $('input[id^=file]').hide();
    $('button[id^=browse]').click(function () {
        $(this).prev('input[type=file]').click();
    })
});

 <div class="fileupload fileupload-new" data-provides="fileupload">
   <div class="input-append">
     <div class="uneditable-input">
       <i class="glyphicon glyphicon-file fileupload-exists"></i>
     </div>
     <span class="btn btn-default btn-file">
      <span class="fileupload-new">Select Logo Image</span>
      <!--<input type="file" />-->
      <input type="file" name="uploadfile" value="" id="filePhoto">
     </span>
   </div>
 </div>

.btn-file>input {
width: 100%;
height: 100%;
padding: 0px;
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
font-size: 23px;
direction: ltr;
cursor: pointer;
}

.fileupload .btn {
vertical-align: middle;
line-height: 21px;
margin-left: -5px;
}
.btn-file {
position: relative;
vertical-align: middle;
}
.btn-default {
background: #e4e7ea;
color: #636e7b;
}