javascript input type="file" javascript点击模拟
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5288352/
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
input type="file" javascript click simulation
提问by Alex Ivasyuv
回答by Dilhan Maduranga
Hey Alex Ivasyuv,
嗨，亚历克斯·伊瓦修夫，
Read your problem and took a look at the page you have pointed.
阅读您的问题并查看您指向的页面。
You have directed click event of the button to the click event of right? As I think that's not quite possible everywhere. The file input type handles the popups and uploads itself..
您已将按钮的单击事件定向到对的单击事件？因为我认为这在任何地方都不太可能。文件输入类型处理弹出窗口并自行上传..
And seems you cannot trigger the popup file upload window of just by calling click() event. At least it's not possible in the browsers like Firefox, opera, chrome etc. But it's possible in IE right? (IE always behave strangely anyway..!)
并且似乎您无法仅通过调用 click() 事件来触发弹出文件上传窗口。至少在 Firefox、opera、chrome 等浏览器中是不可能的。但在 IE 中是可能的，对吧？（无论如何，IE 总是表现得很奇怪..！）
I found some articles that may help to figure this out. check them. You'll solve the problem...!
我找到了一些可能有助于解决这个问题的文章。检查它们。你会解决问题......！
02. https://stackoverflow.com/questions/2048026/open-file-dialog-box-in-javascript
02. https://stackoverflow.com/questions/2048026/open-file-dialog-box-in-javascript
Regards, ADynaMic
问候， ADynaMic
回答by Chris
I was Googling this recently and decided to come up with my own solution.
我最近在谷歌上搜索这个并决定想出我自己的解决方案。
For those of you looking for a solution please see my repo - Fancy Upload jQuery Plugin
对于那些正在寻找解决方案的人，请参阅我的 repo - Fancy Upload jQuery Plugin
This is a small plugin for jQuery but you are welcome to snip it up or use it as your code base - whatever! It just styles up your standard upload button and gives you a lot more room for customisation.
这是一个用于 jQuery 的小插件，但欢迎您将其剪下或将其用作您的代码库 - 无论如何！它只是为您的标准上传按钮设计样式，并为您提供更多自定义空间。
The code for this plugin can be seen below. It can be called on any file upload element using $('INPUT[type=file]').fancyUpload();
这个插件的代码可以在下面看到。可以使用 $('INPUT[type=file]').fancyUpload(); 在任何文件上传元素上调用它。
$.fn.fancyUpload = function(data) {
// generate unique ID for upload box and determine default text to use
var uploadBox = $(this);
var uniqID = Math.floor( Math.random() * 999999 );
var defText = (data == "" || data == undefined || data.defaultText == "" || data.defaultText == undefined) ? 'Click here to add an Attachment' : data.defaultText;
// hide the original upload box and replace with fancyUpload
uploadBox.hide();
uploadBox.before('<input class="fancyUpload" type="text" value="' + defText + '" id="uploadID'+uniqID+'" />').wrap('<div />');
var newUploadBox = $('INPUT[type=text]#uploadID'+uniqID);
// handle clicks on new upload box
newUploadBox.click(function (e) {
var _this = $(this);
// blur the text box because we dont want to focus on it and emulate click on file upload
_this.blur().siblings('div:first').children('INPUT[type=file]').click().bind('change', function (e) {
// determine resulting file name by getting last element in full file path
var filename = $(this).val().split("\");
filename = filename[filename.length-1];
// set file name on emulated text box
_this.attr({ 'value' : (filename == "" || filename == undefined) ? defText : 'Attachment: ' + filename }).addClass('fileOn');
// handle form field resets (reset to defText)
_this.parents('FORM:first').find('INPUT[type=reset]').click(function () {
_this.attr({ 'value' : defText }).removeClass('fileOn');
});
});
});
};
回答by Rick Mortensen
On Android (for security reasons) the click handler that originally received the user's click must be the same logic that sends a click to a file input element. Thus the file input element can be hidden (for example, if you want to trigger an upload from a menu selection). For example, following code (contained in JsFiddle:):
在 Android 上（出于安全原因），最初接收用户点击的点击处理程序必须与将点击发送到文件输入元素的逻辑相同。因此可以隐藏文件输入元素（例如，如果您想从菜单选择触发上传）。例如，以下代码（包含在JsFiddle: 中）：
jQuery(function($) {
$('#capture').on('click', function(e) {
$('#file')[0].click();
});
});
回答by SynCap
<label><input type="file" name="fworedfile" id="fworedfile" style="display:none">
CLICK!</label><br/>