使用AjaxUpload创建的上传按钮表现很奇怪

时间:2012-09-17 07:41:29

标签: javascript jquery ajax-upload

问题与其他问题有点不同。我遇到了与jQuery AjaxUpload, have to click button twice?类似的问题,但我设法通过我的解决方法解决了这个问题。按钮完美无缺。但现在问题是,当我从按钮的顶部或左侧拖动鼠标后单击该按钮时,它不起作用,但是如果我从另一侧拖动鼠标,它可以正常工作。 简而言之,当从顶部到该按钮时,按钮会被悬停,而不是由ajax上传创建的隐藏文件选择器。

while not taking mouse on that button from top

When taking move on that button from top or left

在第一张图片中,我从按钮侧面取了鼠标指针,我可以选择选择文件。但是如其他图片所示,我从按钮顶部取出鼠标指针,按钮悬停。

这是我的按钮代码:

<input type="button" value="Upload Image" class="imgUploadBtn" />

我的JS片段:

function uploadAndGetImgUrl(tsource,status) {
    new AjaxUpload(tsource,{
        action: 'imageUpload.php',
        name: 'uploadfile',
        data: {},
        onSubmit: function(file, ext){
                if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                    // extension is not allowed
                    status.text('Only Images are Allowed');
                    return false;
                }
                status.text('Uploading...');
        },
        onComplete: function(file, response){
            //On completion clear the status
            status.text('');
            $('#idSpclImgLink').val(response);
            $('#idImgLink').val(response);
        }
    });
}

$(document).live("imgAttach",function() {
    alert("Want something Added");
    uploadAndGetImgUrl($('.imgUploadBtn'),$('#idStatus'));
});

我检查了ajaxupload.3.5.js但发现它在悬停时执行了一些过程并使用左侧和顶部偏移来保留悬停效果。但我无法修复此问题。知道为什么会这样吗?

PS:我使用铬。我也检查了Firefox和相同的行为。

2 个答案:

答案 0 :(得分:1)

打开ajaxupload的插件文件..

在定义mousemove事件处理程序的函数中,找到注释: //鼠标离开按钮

将下一行更新为 over = true;

答案 1 :(得分:0)

不完全是一般问题的解决方案,但对于我的情况,我只是更改了2行并适用于我的方案。

将第368行和第369行更改为

if ((c.x >= box.left-5) && (c.x <= box.right) && 
        (c.y >= box.top-10) && (c.y <= box.bottom)){    

显然会有效。