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

但请注意,出于安全原因,文件输入给出的值是假的.如果您想显示文件名,可以删除斜杠.

以下是使用字符串拆分和数组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

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

在Jquery:

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

Answer 4

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

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

希望这是有道理的，

杰爱