使用 javascript/jquery 触发文件上传对话框
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4502612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
trigger file upload dialog using javascript/jquery
提问by kamikaze_pilot
instead of using <input type="file">
, is it possible to use <input type="text">
and then script it using javascript or jquery such that when the text box is clicked, the file upload dialogue shows up.....(and have it actually uploaded when it's submitted into a form)
而不是使用<input type="file">
,是否可以使用<input type="text">
然后使用javascript或jquery编写脚本,以便在单击文本框时显示文件上传对话框......(并在提交到表单时实际上传)
回答by treeface
You mean something like this?
你的意思是这样的?
$('input[type=text]').click(function() {
$('input[type=file]').trigger('click');
});
$('input[type=file]').change(function() {
$('input[type=text]').val($(this).val());
});
Note, though, that the value given by the file input is fake for security reasons. If you want to just have the file name show up, you can cut out the slashes.
但请注意,出于安全原因,文件输入给出的值是假的。如果只想显示文件名,则可以去掉斜杠。
Here's an example of how to do it using a string split and an array pop:
这是一个如何使用字符串拆分和数组弹出的示例:
$('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);
});
You can adjust this further to account for systems that use a forward slash as the directory separator. It's also important to note that if you do this, you'll lose the functionality of many modern browsers where users can drag files from their computer directly onto a file input. If I were you, I'd embrace that paradigm by styling the file input rather than trying to turn a text input into something that it is not.
您可以进一步调整它以考虑使用正斜杠作为目录分隔符的系统。同样重要的是要注意,如果你这样做,你将失去许多现代浏览器的功能,用户可以将文件从他们的计算机直接拖到文件输入上。如果我是你,我会通过设置文件输入的样式来接受这种范式,而不是试图将文本输入转换为它不是的东西。
回答by Alvin K.
And if the HTML code has identical multiple inputs like this one below:-
如果 HTML 代码具有相同的多个输入,如下所示:-
<div class="item">
<input type="text" />
<input type="file" />
</div>
<div class="item">
<input type="text" />
<input type="file" />
</div>?????????????????????
Expanding on @treeface's answer, the Jquery code (current version 1.8.0) would be:
扩展@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());
});?
Do take note between $parents() and $parent() in jQuery. Try it out @ http://jsfiddle.net/afxDC/
请注意 jQuery 中 $parents() 和 $parent() 之间的关系。试试@ http://jsfiddle.net/afxDC/
回答by Raghav
Dont use display:none
or visibility:hidden
initially in the css
不要在 css 中使用display:none
或visibility:hidden
最初
In Jquery:
在Jquery 中:
$(document).ready(function() {
$('#file').hide();
$("#elementToBeClicked").click(function(){
$('#file').click();
});
});
回答by JLove
I have the suspicion that due to security reasons you wont be able to do this. I seem to remember a while back trying to set the value attribute of a file upload element which you can't do as you could pull specific files from a users computer without their consent. I'd imagine that this would extend to programmatically changing a text box to a file upload element as you could set the value of the text field to the file you wanted to add then change it's type to a upload element and submit the form.
我怀疑由于安全原因,您将无法执行此操作。我似乎记得前一段时间试图设置文件上传元素的 value 属性,您不能这样做,因为您可以在未经用户同意的情况下从用户计算机中提取特定文件。我想这将扩展到以编程方式将文本框更改为文件上传元素,因为您可以将文本字段的值设置为要添加的文件,然后将其类型更改为上传元素并提交表单。
It should be a simple enough thing to try although I'd think you're working within the limitations of Javascript and therefore if you can't do it in native JS you'd be unlikely to be able to use JQuery.
尽管我认为您在 Javascript 的限制范围内工作,但它应该是一个足够简单的尝试,因此如果您不能在本机 JS 中做到这一点,您就不太可能使用 JQuery。
Hope this makes sense,
希望这是有道理的,
JLove
J爱
回答by zedecliff
i think you can bind the input text to a jquery/javascript function that will create an file input with code and the the user can now upload a file
我认为您可以将输入文本绑定到 jquery/javascript 函数,该函数将使用代码创建文件输入,用户现在可以上传文件
<input type="text" onclick="upload"/>
function upload(){
$('[input type="text"]').append('<input type="file"/>')
}