图片上传的浏览器和事件处理问题答案

【问题标题】：Browser and event handling issue with picture upload图片上传的浏览器和事件处理问题
【发布时间】：2011-11-02 11:35:18
【问题描述】：

此图片上传脚本在 google chrome 中不起作用，但在 Firefox 和 Internet Explorer 中运行良好。请问有人可以帮忙吗？

$("a#picUpload").bind('click', function() {
    $(":input[type=file]").click();
});

其次，在选择图片并单击打开对话框上的打开按钮后，我希望在打开的对话框卸载后自动开始图片上传，但我不知道该怎么做。上传是ajax。有什么建议吗？谢谢。

【问题讨论】：

【解决方案1】：

我认为第一个问题可以通过在 '#' 之前的 'a' 之后引入一个空格来解决。我假设 'picUpload' 是锚元素的 id。在这种情况下，您根本不必使用“a”。只需使用“#picUpload”将点击事件绑定到元素。我更喜欢第二种方法，您可以单独使用#id 来获取该元素的 jQuery 对象。

$("#picUpload").bind('click', function() {
    $(":input[type=file]").click();
});

我还建议您检查表单中是否存在与“picUpload”元素具有相同 id 的任何其他元素。在这种情况下，事情可能会出错。

要在选择文件后自动开始上传文件，请使用 input:file 元素的 'change' 事件。

$('#fileUpload').change(function() {
    alert('changed');
    //call your ajax function for uploading file
});

要使上述脚本正常工作，表单应如下所示

<form>
   <a id='picUpload' href='#'>Upload picture</a>
    <input id='fileUpload' type="file"/>
</form>

【讨论】：

感谢您的宝贵时间，第二部分运行良好，但打开的对话部分不一致，有时它在输入[type=file]前的冒号在chrome中运行。
我已经在使用 chrome 的答案中给出的 jsfiddle 链接中进行了检查，两者都没有问题。你能给你的表单元素吗？请问你用的是哪个版本的chrome？我给你查一次。