输入类型="；文件"；javascript点击模拟

我想知道为什么这个例子在Chrome10中有效，但在FX3.6中不起作用？ IFAIK，恰好输入type=“file”单击在那里不起作用

有人能解释一下原因吗？

嘿，亚历克斯·伊瓦修夫，

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

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

似乎您不能仅仅通过调用click（）事件触发的弹出文件上载窗口。至少在Firefox、opera、chrome等浏览器中是不可能的，但在IE中是可能的，对吗？（反正总是举止怪异）

我找到了一些可能有助于解决这个问题的文章。检查一下。你会解决问题的

问候，

---

ADynaMic

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

对于那些寻求解决方案的人，请参见我的回购协议-

这是一个用于jQuery的小插件，但欢迎您剪掉它或将其用作您的代码库-随便什么！它只是为你的标准上传按钮设计了样式，给你更多的定制空间

这个插件的代码可以在下面看到。可以使用$（'INPUT[type=file]'）在任何文件上载元素上调用它

$.fn.fancyUpload=函数（数据）{
//为上传框生成唯一ID并确定要使用的默认文本
var uploadBox=$（这个）；
var uniqID=Math.floor（Math.random（）*99999）；
var defText=（data==“”| | data==未定义| | | data.defaultText==“”| | data.defaultText==未定义）？“单击此处添加附件”：data.defaultText；
//隐藏原始上传框并替换为fancyUpload
hide（）；
上传框。在（“”）之前。包装（“”）；
var newUploadBox=$（'INPUT[type=text]#uploadID'+uniqID）；
//点击新的上传框
newUploadBox。单击（函数（e）{
var_this=$（this）；
//模糊文本框，因为我们不想把重点放在它和模拟点击文件上传上
_this.blur（）{
//通过获取完整文件路径中的最后一个元素来确定结果文件名
var filename=$（this.val（）.split（\\）；
filename=filename[filename.length-1]；
//在模拟文本框上设置文件名
_this.attr（{'value'：（filename==“”| | filename==未定义）？defText:'附件：'+filename}）.addClass（'fileOn'）；
//句柄表单字段重置（重置为defText）
_这是.parents（'FORM:first'）。find（'INPUT[type=reset]'）。单击（function（）{
_this.attr（{'value'：defText}）.removeClass（'fileOn'）；
});
});
});
};

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

点击

好的，我发现它可以从FX4获得，但为什么？有什么特别的技术吗？他们只是在版本4中添加了“自动点击”文件类型输入的功能，该示例中的所有其他功能都已经在版本3.6中提供了。为什么？我猜这对开发者来说是个问题，我怀疑你会在这里找到他们看看这两个问题：我想知道投票失败的原因。。。这对其他人来说是一个有用的资源。你的答案只不过是一个链接。对于本网站而言，仅链接的答案不是有用的资源，尤其是当链接在将来某个时候断开时。@RayNicholus我希望这对你更有价值。链接指向一个插件的源代码，该插件可以解决OP的问题。因此，我认为这是有用的。

$.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');
            });
        });
    });
};

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