输入类型=“文件” javascript点击模拟

Question

我想知道为什么这个示例在 Chrome 10 中有效，但在 Fx 3.6 中不起作用？ IFAIK，确切的输入类型=“文件”点击在那里不起作用...

任何人都可以解释一下，为什么？

Answer 1

嘿 Alex Ivasyuv，

阅读您的问题并查看您所指向的页面。

您已将按钮的单击事件定向到右侧的单击事件吗？我认为这并不是在所有地方都是可能的。文件输入类型处理弹出窗口并自行上传。

并且似乎您无法仅通过调用 click() 事件来触发弹出文件上传窗口。至少在 Firefox、opera、chrome 等浏览器中是不可能的。但是在 IE 中是可能的，对吗？ （无论如何，IE 总是表现得很奇怪......！）

我发现了一些文章可能有助于解决这个问题。检查它们。你会解决这个问题...！

01. https://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input-e

02. https://stackoverflow.com/questions/2048026/open-file-dialog-box-in-javascript

问候，
ADynaMic

Answer 2

我最近在谷歌上搜索这个并决定提出我自己的解决方案。

对于那些正在寻找解决方案的人，请参阅我的存储库 - Fancy Upload jQuery 插件

这是 jQuery 的一个小插件，但欢迎您将其剪下来或使用它作为您的代码库 - 无论如何！它只是设计了您的标准上传按钮，并为您提供了更多的自定义空间。

该插件的代码如下所示。可以使用 $('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');
            });
        });
    });
};

Answer 3

<label><input type="file" name="fuckedfile" id="fuckedfile" style="display:none">
CLICK!</label><br/>

Answer 4

在 Android 上（出于安全原因），最初接收用户单击的单击处理程序必须与将单击发送到文件输入元素的逻辑相同。因此，可以隐藏文件输入元素（例如，如果您想从菜单选择触发上传）。
例如，以下代码（包含在 JsFiddle: 中）：

jQuery(function($) {
  $('#capture').on('click', function(e) {
    $('#file')[0].click();
  });
});