Chrome:jQuery触发点击事件（可与Firefox配合使用）

其思想是：您有一个隐藏的文件字段和一个图像。您可以使用该图像显示“选择文件”对话框。然后我在画布上显示图像

<input id="ytfile-select" type="hidden" value="" name="Foto[image]" />
<input style="display:none" id="file-select" accept="image/*" 
name="Foto[image]" type="file" />
<img id="upload-image" src="/images/design/upload-image.png" 
alt="upload-image-button" />        
<canvas id="canvas">  
    Sorry, your browser doesn't support the &lt;canvas&gt; element.  
</canvas>  

$('#upload-image').click(function(){
  $('#file-select').click();
});


$('#file-select').bind('change',function(){
  var fileList = this.files;  
  var img = document.createElement("img");  
  img.classList.add("obj");  
  img.src = window.URL.createObjectURL(fileList[0]);  
  var ctx = document.getElementById('canvas').getContext("2d");
  ctx.drawImage(img,0,0);
});

这将触发单击事件：

$'file-select'.trigger单击

例如：

JSFIDLE演示：

更新：

实际上，如果输入类型=file为display:none，则不会弹出。仍然可以通过一些CSS使它对用户不可见：position:absolute；顶部：-999px；左：-999px

这将触发单击事件：

$'file-select'.trigger单击

例如：

JSFIDLE演示：

更新：

实际上，如果输入类型=file为display:none，则不会弹出。仍然可以通过一些CSS使它对用户不可见：position:absolute；顶部：-999px；左：-999px

试试JSFIDLE。我不记得我把这个插件复制到哪里了

插件代码

jQuery.fn.file = function(chooseHandler) {
    return this.each(function() {

        var element = $(this),
            element_name = element.attr('data-name'),
            element_id = element.attr('data-id');

        // check name of radio-group
        if (element_name == undefined) {
            alert('Error: fileInput must have name!');
        }

        var holder = $('<div></div>').appendTo(element).css({
            position:'absolute',
            overflow:'hidden',
            '-moz-opacity':'0',
            filter:'alpha(opacity: 0)',
            opacity:'0',
            zoom:'1',
            width:element.outerWidth()+'px',
            height:element.outerHeight()+'px',
            'z-index':1
        });

        var _input;

        var addInput = function() {
            _input = holder.html('<input name="' + element_name + '" type="file" style="border:none; position:absolute;cursor:pointer;">').find('input');

            if (element_id != undefined) {
                _input.attr('id', element_id);
            }

            if (chooseHandler) {
                _input.change(chooseHandler);
            }
          };

        var position = function(e) {
            holder.offset(element.offset());

            if (e) {
                _input.offset({left:e.pageX-_input.outerWidth()+25, top:e.pageY-10});
            }
        };

        addInput();

        element.mouseover(position);
        element.mousemove(position);
        position();        
    });
};

用法

试试JSFIDLE。我不记得我把这个插件复制到哪里了

插件代码

jQuery.fn.file = function(chooseHandler) {
    return this.each(function() {

        var element = $(this),
            element_name = element.attr('data-name'),
            element_id = element.attr('data-id');

        // check name of radio-group
        if (element_name == undefined) {
            alert('Error: fileInput must have name!');
        }

        var holder = $('<div></div>').appendTo(element).css({
            position:'absolute',
            overflow:'hidden',
            '-moz-opacity':'0',
            filter:'alpha(opacity: 0)',
            opacity:'0',
            zoom:'1',
            width:element.outerWidth()+'px',
            height:element.outerHeight()+'px',
            'z-index':1
        });

        var _input;

        var addInput = function() {
            _input = holder.html('<input name="' + element_name + '" type="file" style="border:none; position:absolute;cursor:pointer;">').find('input');

            if (element_id != undefined) {
                _input.attr('id', element_id);
            }

            if (chooseHandler) {
                _input.change(chooseHandler);
            }
          };

        var position = function(e) {
            holder.offset(element.offset());

            if (e) {
                _input.offset({left:e.pageX-_input.outerWidth()+25, top:e.pageY-10});
            }
        };

        addInput();

        element.mouseover(position);
        element.mousemove(position);
        position();        
    });
};

用法

---

---

说明显而易见，但您的脚本是否包含在标记中？无法通过安全原因进行软单击说明显而易见，但您的脚本是否包含在标记中？无法通过安全原因进行软单击我使用的是最新版本的Chrome。“文件”对话框打开。您的示例也适用于我。我用了。触发“点击”；在我之前的代码中，它没有成功。如果您使输入类型不显示，您的代码将不会运行：。triggerclick只是更详细的说法。click@Jakub那就让它从屏幕上消失吧！我更新了JSFIDLE演示。看看，我用的是最新版本的Chrome。“文件”对话框打开。您的示例也适用于我。我用了。触发“点击”；在我之前的代码中，它没有成功。如果您使输入类型不显示，您的代码将不会运行：。triggerclick只是更详细的说法。click@Jakub那就让它从屏幕上消失吧！我更新了JSFIDLE演示。看看，谢谢。这个代码是做什么的？它是只显示文件对话框，还是同时显示图像？我试过了，但是图像还没有在firefox和chrome上显示。。此代码显示图像和隐藏文件输入下的图像。。。尝试设置另一个图像URL我看到该图像，当我单击它时，我会看到文件对话框。对不起，我没有看到关于FF错误的问题。。我不知道他为什么这么做。我用firefox解决了这个问题。我的帖子已经更新了。我用这个网站来解决它：谢谢。这个代码是做什么的？它是只显示文件对话框，还是同时显示图像？我试过了，但是图像还没有在firefox和chrome上显示。。此代码显示图像和隐藏文件输入下的图像。。。尝试设置另一个图像URL我看到该图像，当我单击它时，我会看到文件对话框。对不起，我没有看到关于FF错误的问题。。我不知道他为什么这么做。我用firefox解决了这个问题。我的帖子已经更新了。我使用此网站来解决此问题：

jQuery.fn.file = function(chooseHandler) {
    return this.each(function() {

        var element = $(this),
            element_name = element.attr('data-name'),
            element_id = element.attr('data-id');

        // check name of radio-group
        if (element_name == undefined) {
            alert('Error: fileInput must have name!');
        }

        var holder = $('<div></div>').appendTo(element).css({
            position:'absolute',
            overflow:'hidden',
            '-moz-opacity':'0',
            filter:'alpha(opacity: 0)',
            opacity:'0',
            zoom:'1',
            width:element.outerWidth()+'px',
            height:element.outerHeight()+'px',
            'z-index':1
        });

        var _input;

        var addInput = function() {
            _input = holder.html('<input name="' + element_name + '" type="file" style="border:none; position:absolute;cursor:pointer;">').find('input');

            if (element_id != undefined) {
                _input.attr('id', element_id);
            }

            if (chooseHandler) {
                _input.change(chooseHandler);
            }
          };

        var position = function(e) {
            holder.offset(element.offset());

            if (e) {
                _input.offset({left:e.pageX-_input.outerWidth()+25, top:e.pageY-10});
            }
        };

        addInput();

        element.mouseover(position);
        element.mousemove(position);
        position();        
    });
};

<div id="my-select" data-name="name-of-autogenerated-input-element" class="some custom button style"></div>


...
$("#my-select").file();