Question

我想知道为什么this示例在Chrome 10中有效，但在Fx 3.6中不起作用？ IFAIK，确切地输入type =“file”点击在那里不起作用...

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

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

<强> 此致再生不良

Answer 2

我最近在Google上搜索，并决定提出自己的解决方案。

对于那些寻找解决方案的人，请参阅我的回购 - Fancy Upload jQuery Plugin

这是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

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

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

Answer 4

＆＃13;

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></u‌ses-permission>

＆＃13;

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

4 个答案: