使用 javascript/jquery 触发文件上传对话框答案

【问题标题】：trigger file upload dialog using javascript/jquery使用 javascript/jquery 触发文件上传对话框
【发布时间】：2010-12-21 18:27:01
【问题描述】：

是否可以使用<input type="file">，而不是使用<input type="text">，然后使用javascript或jquery编写脚本，这样当点击文本框时，文件上传对话框就会出现.....（并拥有它实际是在提交到表单时上传的）

【问题讨论】：

您为什么要这样做？上传输入类型正是这样做的
您可能想查看许多可用的 jQuery 文件上传器插件之一，而不是自己动手。 * Ajax Upload * Uploadify
是的，基本上我不想让浏览按钮显示出来......差不多
如果使用jQuery File Upload，可以通过html和css实现：<span class="fileinput-button"><input type="file" name="files[]" multiple=""></span>。

标签： javascript jquery html file-upload textbox

【解决方案1】：

你的意思是这样的？

http://jsfiddle.net/CSvjw/

$('input[type=text]').click(function() {
    $('input[type=file]').trigger('click');
});

$('input[type=file]').change(function() {
    $('input[type=text]').val($(this).val());
});

但请注意，出于安全原因，文件输入给出的值是假的。如果你只想显示文件名，你可以去掉斜线。

这是一个如何使用字符串拆分和数组弹出的示例：

http://jsfiddle.net/CSvjw/1/

$('input[type=text]').click(function() {
    $('input[type=file]').trigger('click');
});

$('input[type=file]').change(function() {
    var vals = $(this).val(),
        val = vals.length ? vals.split('\\').pop() : '';

    $('input[type=text]').val(val);
});

您可以进一步调整它以适应使用正斜杠作为目录分隔符的系统。同样重要的是要注意，如果您这样做，您将失去许多现代浏览器的功能，用户可以将文件从他们的计算机直接拖到文件输入中。如果我是你，我会通过设置文件输入的样式来接受这种范式，而不是尝试将文本输入转换成它不是的东西。

【讨论】：

是的，类似的东西....但它似乎在 Firefox 中不起作用，这将是一个很大的 nono
@Drackir @kamikaze_pilot 是的...简而言之，一些浏览器认为这种事情是对浏览器 UI 的劫持，因此直接不允许触发点击文件输入，或者提示您询问您是否真的打算这样做。正如我在帖子中所说，尝试以不同的方式思考您的问题。您可能最好通过简单地设置文件输入的样式并更改其周围其他元素的值来做到最好（如果您想在文本输入中显示文件名，您仍然可以这样做）。
@JordanFeldstein：对我来说，它在 Chrome 中完美运行。下次您对我的某个答案投反对票时，请提供一些实质内容来解释您所看到的问题。
好的：在文件输入上调用 $(...).trigger('click') 不会打开“浏览到文件”对话框（在 Chrome 中，截至 2011 年 12 月）。
每次使用 16.0.912.63 beta-m 都非常适合我

【解决方案2】：

如果 HTML 代码具有相同的多个输入，如下所示：-

<div class="item">
<input type="text" />
<input type="file" />
</div>
<div class="item">
<input type="text" />
<input type="file" />
</div>

扩展@treeface 的答案，Jquery 代码（当前版本 1.8.0）将是：

$('input[type=text]').click(function() {
    $(this).parent(".item")
        .find('input[type=file]')
        .trigger('click');
});

$('input[type=file]').change(function() {
    $(this).parent(".item")
        .find('input[type=text]')
        .val($(this).val());
});

请注意 jQuery 中的 $parents() 和 $parent() 之间的关系。试试看@http://jsfiddle.net/afxDC/

【讨论】：

【解决方案3】：

最初不要在 css 中使用 display:none 或 visibility:hidden

在 Jquery 中：

$(document).ready(function() {
 $('#file').hide(); 
 $("#elementToBeClicked").click(function(){
   $('#file').click();
 });
});

【讨论】：

【解决方案4】：

我怀疑出于安全原因，您将无法执行此操作。我似乎记得前一段时间试图设置文件上传元素的 value 属性，这是您无法做到的，因为您可以在未经用户同意的情况下从用户计算机中提取特定文件。我想这将扩展到以编程方式将文本框更改为文件上传元素，因为您可以将文本字段的值设置为要添加的文件，然后将其类型更改为上传元素并提交表单。

这应该是一件很简单的事情，尽管我认为你在 Javascript 的限制范围内工作，因此如果你不能在原生 JS 中做到这一点，你就不可能使用 JQuery。

希望这是有道理的，

爱情

【讨论】：

【解决方案5】：

我认为您可以将输入文本绑定到 jquery/javascript 函数，该函数将使用代码创建文件输入，用户现在可以上传文件

<input type="text" onclick="upload"/>

function upload(){
    $('[input type="text"]').append('<input type="file"/>')
}

【讨论】：