触发文件上传对话框使用JavaScript / jQuery的 [英] trigger file upload dialog using javascript/jquery

问题描述

而不是使用< input type =file> ，是否可以使用< input type =text> ;然后使用javascript或jquery编写脚本，这样当文本框被点击时，文件上传对话框显示出来了（当它被提交到表单中时，它实际上传了） / b>

解决方案

你的意思是这样吗？

http://jsfiddle.net/CSvjw/

  $（'input [type = text]'）。click（function）（）{
 $（'input [type = file]'）。trigger（'click'）; 
}）; 
 $ b $（'input [type = file]'）。change（function（）{
 $（'input [type = text]'）。val（$（this）.val （））; 
}）; 
  

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

下面是一个如何使用字符串拆分和数组弹出：

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

  $（'input [type = text]'）。click（function（）{
 $（'输入[type = file]'）。trigger（'click'）; 
}）; 
 $ b $（'input [type = file]'）。change（function（）{
 var vals = $（this）.val（），
 val = vals。 pop（）：''; 
 
 $（'input [type = text]'）。val（val）; 
 }）; 
  

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

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)

解决方案

You mean something like this?

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

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:

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

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.

这篇关于触发文件上传对话框使用JavaScript / jQuery的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！