Upload Button created with AjaxUpload behaves strange
-
02-07-2021 - |
سؤال
question is bit different than other questions regarding this. I had a similar issue as jQuery AjaxUpload, have to click button twice? but I managed to fix it with my workaround. Button comes perfectly. But now issue is, when I click that button after dragging my mouse when coming from top or the left of the button, it doesn't work, but if i drag my mouse from other side, it works fine. In short, when coming from top to that button, button gets hovered, not the hidden file selector created by ajax upload.
In first image, I took mouse pointer from side of the button and i get option to choose file. But as shown in other image, I took mouse pointer from top of the button and button is hovered.
Here is my button code:
<input type="button" value="Upload Image" class="imgUploadBtn" />
My JS snippet:
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'));
});
I checked ajaxupload.3.5.js but and found it does some process while hovering and uses left and top offsets to retain hover effect. But I couldn't fix a fix yet for that. Any idea why is this happening?
PS: I use chrome. I also checked in Firefox and same behavior.
المحلول 2
Not exactly an solution to general problem but for my case, I simply changed 2 lines and works for my scenario.
Change line number 368 and 369 to
if ((c.x >= box.left-5) && (c.x <= box.right) &&
(c.y >= box.top-10) && (c.y <= box.bottom)){
It will apparently work.
نصائح أخرى
open the plugin file for ajaxupload..
in the function where the mousemove event handler is being defined, find the comment: // mouse left the button
Update the next line to over = true;