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

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

以下是使用字符串拆分和数组pop进行操作的示例：

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

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

在 Jquery ：

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

Answer 4

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

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

希望这是有道理的，

JLove

Answer 5

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

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

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

5 个答案: