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

Question

而不是使用<input type="file"> ，是否可以使用<input type="text">然后使用 javascript 或 jquery 编写脚本，以便在单击文本框时显示文件上传对话框.. ...（并在提交到表单时实际上传）

Answer 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);
});

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

Answer 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/

Answer 3

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

在Jquery中：

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

Answer 4

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

尽管我认为您在 Javascript 的限制范围内工作，但尝试这应该是一件足够简单的事情，因此如果您不能在本机 JS 中做到这一点，您就不太可能使用 JQuery。

希望这是有道理的，

爱

Answer 5

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

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

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