2011-06-10 92 views
1

我使用jQuery和Andrew Valum's file uploader来处理我的表单中的图片上传。所需的行为是在用户选择文件输入时立即将文件上载到服务器。Javascript在Webkit中工作,但不是FF

html元素:

<input type="file" id="imgUpload" /> 

JS:

var uploader = new qq.FileUploaderBasic({ 
    button: $('#imgUpload')[0], 
    //... 
}); 

以上正常工作与Chrome和Safari浏览器,但不与Firefox浏览器。 Firefox处理JS的方式有什么不同吗?非常感谢。

编辑:虽然我不是一个JavaScript专家,但我认为Valum的文件上传器会用自己的文件替换目标输入元素,然后它将附加一个onchange侦听器以处理自定义ajax请求。这在Chrome中运行良好。但是,在Firefox中,事件从不触发ajax请求。文件输入与正常的html表单一样,并且需要表单提交。没有javascript错误或任何东西,所有其他脚本在所有浏览器中都能正常工作。

更新:仍在工作。结果发现qq.FileUploaderBasic正在初始化正确,并且输入元素正在成功发送“更改”事件。它只是不会像在Chrome中那样触发FF中的事件处理程序。

+0

如果您可以提供有关其无法使用的方式的详细信息,可能会有所帮助。是否有JavaScript错误?奇怪的东西在页面上? – Pointy 2011-06-10 03:49:54

+0

是否在FF中上传工作,但需要用户点击“上传”按钮?( – karim79 2011-06-10 03:50:09

+0

(老实说,谁会投这个问题呢?我的意思是,这并不可怕,但他甚至没有详细说明问题。 ) – Pointy 2011-06-10 03:51:44

回答

1

原来,这是一个CSS问题,而不是一个Javascript的。会发生什么情况是文件上载脚本在目标输入元素内部创建了一个元素新的<input type="file">元素。这个新的目标输入元素具有所需的更改事件处理程序。

在Chrome中,单击原始输入会激活新的输入元素,从而触发所需的行为。问题是,在Firefox中,单击原始输入以某种方式激活了原始输入元素而不是新输入元素。这是问题的原因。

所以这是一个跨浏览器的CSS问题比一个Javascript的更多。我的下一步是弄清楚如何让Firefox选择正确的元素,但是现在希望这可以帮助其他有相同问题的人。

+0

对于任何有同样问题的人,请参阅http://stackoverflow.com/questions/6309029/nested-file-input-doesnt-work-in-firefox“ – 2011-06-12 22:44:30

相关问题